srcdev-nuxt-forms 0.2.0 → 1.0.1

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 (77) hide show
  1. package/assets/styles/brand/_brand.css +150 -0
  2. package/assets/styles/brand/_brand_dark.css +152 -0
  3. package/assets/styles/brand/_palette_dark.css +148 -0
  4. package/assets/styles/brand/_palette_light.css +148 -0
  5. package/assets/styles/brand/_typography.css +176 -0
  6. package/assets/styles/brand/index.css +1 -0
  7. package/assets/styles/forms/index.css +1 -2
  8. package/assets/styles/forms/themes/_default.css +3 -0
  9. package/assets/styles/forms/themes/_error.css +45 -11
  10. package/assets/styles/forms/themes/_ghost.css +42 -10
  11. package/assets/styles/forms/themes/_primary.css +42 -12
  12. package/assets/styles/forms/themes/_secondary.css +42 -12
  13. package/assets/styles/forms/themes/_success.css +42 -11
  14. package/assets/styles/forms/themes/_tertiary.css +42 -10
  15. package/assets/styles/forms/themes/_warning.css +42 -10
  16. package/assets/styles/forms/themes/index.css +1 -0
  17. package/assets/styles/forms/variables/_palette.css +104 -0
  18. package/assets/styles/forms/variables/_theme.css +1 -1
  19. package/assets/styles/forms/variables/index.css +2 -0
  20. package/assets/styles/main.css +2 -0
  21. package/assets/styles/scaffolding/_margin-helpers.css +308 -0
  22. package/assets/styles/scaffolding/_padding-helpers.css +308 -0
  23. package/assets/styles/scaffolding/_page.css +23 -0
  24. package/assets/styles/scaffolding/index.css +3 -0
  25. package/assets/styles/variables/colors/_blue.css +2 -2
  26. package/assets/styles/variables/colors/_gray.css +1 -1
  27. package/assets/styles/variables/colors/_green.css +2 -2
  28. package/assets/styles/variables/colors/_orange.css +2 -2
  29. package/assets/styles/variables/colors/_red.css +2 -2
  30. package/assets/styles/variables/colors/_yellow.css +1 -1
  31. package/components/forms/form-errors/InputError.vue +82 -37
  32. package/components/forms/input-button/InputButtonCore.vue +25 -104
  33. package/components/forms/input-checkbox/InputCheckboxCore.vue +37 -181
  34. package/components/forms/input-checkbox/InputCheckboxWithLabel.vue +42 -51
  35. package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue +42 -69
  36. package/components/forms/input-checkbox/variants/SingleCheckbox.vue +126 -111
  37. package/components/forms/input-number/InputNumberCore.vue +184 -0
  38. package/components/forms/input-number/variants/InputNumberDefault.vue +155 -0
  39. package/components/forms/input-radio/InputRadiobuttonCore.vue +212 -0
  40. package/components/forms/input-radio/InputRadiobuttonWithLabel.vue +103 -0
  41. package/components/forms/input-radio/variants/MultipleRadiobuttons.vue +166 -0
  42. package/components/forms/input-range/InputRangeCore.vue +70 -88
  43. package/components/forms/input-range/variants/InputRangeDefault.vue +74 -46
  44. package/components/forms/input-text/InputTextCore.vue +141 -109
  45. package/components/forms/input-text/variants/material/InputPasswordWithLabel.vue +99 -0
  46. package/components/forms/input-text/variants/material/InputTextAsNumberWithLabel.vue +142 -0
  47. package/components/forms/input-text/variants/material/InputTextWithLabel.vue +125 -0
  48. package/components/forms/input-textarea/InputTextareaCore.vue +96 -105
  49. package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue +106 -0
  50. package/components/scaffolding/footer/NavFooter.vue +62 -0
  51. package/composables/useApiRequest.ts +25 -0
  52. package/composables/useFormControl.ts +2 -0
  53. package/composables/useSleep.ts +2 -2
  54. package/composables/useStyleClassPassthrough.ts +30 -0
  55. package/composables/useZodValidation.ts +120 -0
  56. package/layouts/default.vue +21 -5
  57. package/package.json +13 -9
  58. package/pages/forms/examples/material/cssbattle.vue +60 -0
  59. package/pages/forms/examples/material/text-fields.vue +375 -153
  60. package/pages/index.vue +2 -2
  61. package/pages/typography.vue +83 -0
  62. package/server/data/places/cities.json +7 -1
  63. package/types/types.forms.ts +102 -0
  64. package/types/types.zodFormControl.ts +21 -0
  65. package/assets/styles/forms/utils/_a11y.css +0 -5
  66. package/assets/styles/forms/utils/index.css +0 -1
  67. package/components/forms/input-radio/InputRadioCore.vue +0 -226
  68. package/components/forms/input-radio/InputRadioWithLabel.vue +0 -118
  69. package/components/forms/input-radio/variants/MultipleRadio.vue +0 -183
  70. package/components/forms/input-radio/variants/SingleRadio.vue +0 -131
  71. package/components/forms/input-text/variants/material/InputEmailMaterial.vue +0 -72
  72. package/components/forms/input-text/variants/material/InputPasswordMaterial.vue +0 -114
  73. package/components/forms/input-text/variants/material/InputTextMaterial.vue +0 -68
  74. package/components/forms/input-text/variants/material/InputTextMaterialCore.vue +0 -313
  75. package/components/forms/input-textarea/variants/material/InputTextareaMaterial.vue +0 -75
  76. package/components/forms/input-textarea/variants/material/InputTextareaMaterialCore.vue +0 -290
  77. package/composables/useUpdateStyleClassPassthrough.ts +0 -29
package/assets/styles/brand/_brand.css ADDED
@@ -0,0 +1,150 @@
1
+ @import './_palette_light.css';
2
+
3
+ :root {
4
+ --body-background-color: var(--light-body-background-color);
5
+ --focus-visible-colour: var(--light-focus-visible-colour);
6
+
7
+ --brand-grayscale-surface-subtle: var(--light-grayscale-surface-subtle);
8
+ --brand-grayscale-surface-default: var(--light-grayscale-surface-default);
9
+ --brand-grayscale-surface-disabled: var(--light-grayscale-surface-disabled);
10
+ --brand-grayscale-border-default: var(--light-grayscale-border-default);
11
+ --brand-grayscale-border-disabled: var(--light-grayscale-border-disabled);
12
+ --brand-grayscale-border-dark: var(--light-grayscale-border-dark);
13
+ --brand-grayscale-text-title: var(--light-grayscale-text-title);
14
+ --brand-grayscale-text-body: var(--light-grayscale-text-body);
15
+ --brand-grayscale-text-form: var(--light-grayscale-text-form);
16
+ --brand-grayscale-text-subtitle: var(--light-grayscale-text-subtitle);
17
+ --brand-grayscale-text-caption: var(--light-grayscale-text-caption);
18
+ --brand-grayscale-text-negative: var(--light-grayscale-text-negative);
19
+ --brand-grayscale-text-disabled: var(--light-grayscale-text-disabled);
20
+
21
+ --brand-primary-surface-subtle: var(--light-primary-surface-subtle);
22
+ --brand-primary-surface-light: var(--light-primary-surface-light);
23
+ --brand-primary-surface-default: var(--light-primary-surface-default);
24
+ --brand-primary-surface-dark: var(--light-primary-surface-dark);
25
+ --brand-primary-border-subtle: var(--light-primary-border-subtle);
26
+ --brand-primary-border-default: var(--light-primary-border-default);
27
+ --brand-primary-border-dark: var(--light-primary-border-dark);
28
+ --brand-primary-border-light: var(--light-primary-border-light);
29
+ --brand-primary-text-icon: var(--light-primary-text-text);
30
+
31
+ --brand-secondary-surface-subtle: var(--light-secondary-surface-subtle);
32
+ --brand-secondary-surface-light: var(--light-secondary-surface-light);
33
+ --brand-secondary-surface-default: var(--light-secondary-surface-default);
34
+ --brand-secondary-surface-dark: var(--light-secondary-surface-dark);
35
+ --brand-secondary-border-subtle: var(--light-secondary-border-subtle);
36
+ --brand-secondary-border-default: var(--light-secondary-border-default);
37
+ --brand-secondary-border-dark: var(--light-secondary-border-dark);
38
+ --brand-secondary-border-light: var(--light-secondary-border-light);
39
+ --brand-secondary-text-icon: var(--light-secondary-text-text);
40
+
41
+ --brand-accent-primary-surface-light: var(--light-accent-primary-surface-light);
42
+ --brand-accent-primary-surface-subtle: var(--light-accent-primary-surface-subtle);
43
+ --brand-accent-primary-surface-default: var(--light-accent-primary-surface-default);
44
+ --brand-accent-primary-surface-dark: var(--light-accent-primary-surface-dark);
45
+ --brand-accent-primary-border-subtle: var(--light-accent-primary-border-subtle);
46
+ --brand-accent-primary-border-default: var(--light-accent-primary-border-default);
47
+ --brand-accent-primary-border-dark: var(--light-accent-primary-border-dark);
48
+ --brand-accent-primary-border-light: var(--light-accent-primary-border-light);
49
+ --brand-accent-primary-text-icon: var(--light-accent-primary-text-text);
50
+
51
+ --brand-accent-secondary-surface-subtle: var(--light-accent-secondary-surface-subtle);
52
+ --brand-accent-secondary-surface-light: var(--light-accent-secondary-surface-light);
53
+ --brand-accent-secondary-surface-default: var(--light-accent-secondary-surface-default);
54
+ --brand-accent-secondary-surface-dark: var(--light-accent-secondary-surface-dark);
55
+ --brand-accent-secondary-border-subtle: var(--light-accent-secondary-border-subtle);
56
+ --brand-accent-secondary-border-default: var(--light-accent-secondary-border-default);
57
+ --brand-accent-secondary-border-dark: var(--light-accent-secondary-border-dark);
58
+ --brand-accent-secondary-border-light: var(--light-accent-secondary-border-light);
59
+ --brand-accent-secondary-text-icon: var(--light-accent-secondary-text-text);
60
+
61
+ --brand-accent-tertiary-surface-subtle: var(--light-accent-tertiary-surface-subtle);
62
+ --brand-accent-tertiary-surface-light: var(--light-accent-tertiary-surface-light);
63
+ --brand-accent-tertiary-surface-default: var(--light-accent-tertiary-surface-default);
64
+ --brand-accent-tertiary-surface-dark: var(--light-accent-tertiary-surface-dark);
65
+ --brand-accent-tertiary-border-subtle: var(--light-accent-tertiary-border-subtle);
66
+ --brand-accent-tertiary-border-default: var(--light-accent-tertiary-border-default);
67
+ --brand-accent-tertiary-border-dark: var(--light-accent-tertiary-border-dark);
68
+ --brand-accent-tertiary-border-light: var(--light-accent-tertiary-border-light);
69
+ --brand-accent-tertiary-text-icon: var(--light-accent-tertiary-text-text);
70
+
71
+ --brand-error-surface-subtle: var(--light-error-surface-subtle);
72
+ --brand-error-surface-light: var(--light-error-surface-light);
73
+ --brand-error-surface-default: var(--light-error-surface-default);
74
+ --brand-error-surface-dark: var(--light-error-surface-dark);
75
+ --brand-error-border-subtle: var(--light-error-border-subtle);
76
+ --brand-error-border-default: var(--light-error-border-default);
77
+ --brand-error-border-dark: var(--light-error-border-dark);
78
+ --brand-error-border-light: var(--light-error-border-light);
79
+ --brand-error-text-icon: var(--light-error-text-text);
80
+
81
+ --brand-warning-orange-surface-subtle: var(--light-warning-orange-surface-subtle);
82
+ --brand-warning-orange-surface-light: var(--light-warning-orange-surface-light);
83
+ --brand-warning-orange-surface-default: var(--light-warning-orange-surface-default);
84
+ --brand-warning-orange-surface-dark: var(--light-warning-orange-surface-dark);
85
+ --brand-warning-orange-border-subtle: var(--light-warning-orange-border-subtle);
86
+ --brand-warning-orange-border-default: var(--light-warning-orange-border-default);
87
+ --brand-warning-orange-border-dark: var(--light-warning-orange-border-dark);
88
+ --brand-warning-orange-border-light: var(--light-warning-orange-border-light);
89
+ --brand-warning-orange-text-icon: var(--light-warning-orange-text-text);
90
+
91
+ --brand-warning-yellow-surface-subtle: var(--light-warning-yellow-surface-subtle);
92
+ --brand-warning-yellow-surface-light: var(--light-warning-yellow-surface-light);
93
+ --brand-warning-yellow-surface-default: var(--light-warning-yellow-surface-default);
94
+ --brand-warning-yellow-surface-dark: var(--light-warning-yellow-surface-dark);
95
+ --brand-warning-yellow-border-subtle: var(--light-warning-yellow-border-subtle);
96
+ --brand-warning-yellow-border-default: var(--light-warning-yellow-border-default);
97
+ --brand-warning-yellow-border-dark: var(--light-warning-yellow-border-dark);
98
+ --brand-warning-yellow-border-light: var(--light-warning-yellow-border-light);
99
+ --brand-warning-yellow-text-icon: var(--light-warning-yellow-text-text);
100
+
101
+ --brand-success-surface-subtle: var(--light-success-surface-subtle);
102
+ --brand-success-surface-light: var(--light-success-surface-light);
103
+ --brand-success-surface-default: var(--light-success-surface-default);
104
+ --brand-success-surface-dark: var(--light-success-surface-dark);
105
+ --brand-success-border-subtle: var(--light-success-border-subtle);
106
+ --brand-success-border-default: var(--light-success-border-default);
107
+ --brand-success-border-dark: var(--light-success-border-dark);
108
+ --brand-success-border-light: var(--light-success-border-light);
109
+ --brand-success-text-icon: var(--light-success-text-text);
110
+
111
+ /* Colour Zones - Brand 2 */
112
+
113
+ --brand-zone-orange-light: var(--light-zone-orange-light);
114
+ --brand-zone-orange-solid: var(--light-zone-orange-solid);
115
+ --brand-zone-orange-dark: var(--light-zone-orange-dark);
116
+
117
+ --brand-zone-yellow-light: var(--light-zone-yellow-light);
118
+ --brand-zone-yellow-solid: var(--light-zone-yellow-solid);
119
+ --brand-zone-yellow-dark: var(--light-zone-yellow-dark);
120
+
121
+ --brand-zone-pink-light: var(--light-zone-pink-light);
122
+ --brand-zone-pink-solid: var(--light-zone-pink-solid);
123
+ --brand-zone-pink-dark: var(--light-zone-pink-dark);
124
+
125
+ --brand-zone-blue-light: var(--light-zone-blue-light);
126
+ --brand-zone-blue-solid: var(--light-zone-blue-solid);
127
+ --brand-zone-blue-dark: var(--light-zone-blue-dark);
128
+
129
+ --brand-zone-red-light: var(--light-zone-red-light);
130
+ --brand-zone-red-solid: var(--light-zone-red-solid);
131
+ --brand-zone-red-dark: var(--light-zone-red-dark);
132
+
133
+ --brand-zone-green-light: var(--light-zone-green-light);
134
+ --brand-zone-green-solid: var(--light-zone-green-solid);
135
+ --brand-zone-green-dark: var(--light-zone-green-dark);
136
+
137
+ /* TODO); add Brand 1 colours (these are brand 2 colours) */
138
+
139
+ --brand-zone-purple-primary-light: var(--light-zone-purple-primary-light);
140
+ --brand-zone-purple-primary-solid: var(--light-zone-purple-primary-solid);
141
+ --brand-zone-purple-primary-dark: var(--light-zone-purple-primary-dark);
142
+
143
+ --brand-zone-purple-secondary-light: var(--light-zone-purple-secondary-light);
144
+ --brand-zone-purple-secondary-solid: var(--light-zone-purple-secondary-solid);
145
+ --brand-zone-purple-secondary-dark: var(--light-zone-purple-secondary-dark);
146
+
147
+ --brand-zone-grey-light: var(--light-zone-grey-light);
148
+ --brand-zone-grey-solid: var(--light-zone-grey-solid);
149
+ --brand-zone-grey-dark: var(--light-zone-grey-dark);
150
+ }
package/assets/styles/brand/_brand_dark.css ADDED
@@ -0,0 +1,152 @@
1
+ @import './_palette_dark.css';
2
+
3
+ @media (prefers-color-scheme: dark) {
4
+ :root {
5
+ --body-background-color: var(--dark-body-background-color);
6
+ --focus-visible-colour: var(--dark-focus-visible-colour);
7
+
8
+ --brand-grayscale-surface-subtle: var(--dark-grayscale-surface-subtle);
9
+ --brand-grayscale-surface-default: var(--dark-grayscale-surface-default);
10
+ --brand-grayscale-surface-disabled: var(--dark-grayscale-surface-disabled);
11
+ --brand-grayscale-border-default: var(--dark-grayscale-border-default);
12
+ --brand-grayscale-border-disabled: var(--dark-grayscale-border-disabled);
13
+ --brand-grayscale-border-dark: var(--dark-grayscale-border-dark);
14
+ --brand-grayscale-text-title: var(--dark-grayscale-text-title);
15
+ --brand-grayscale-text-body: var(--dark-grayscale-text-negative);
16
+ --brand-grayscale-text-form: var(--dark-grayscale-text-form);
17
+ --brand-grayscale-text-subtitle: var(--dark-grayscale-text-subtitle);
18
+ --brand-grayscale-text-caption: var(--dark-grayscale-text-caption);
19
+ --brand-grayscale-text-negative: var(--dark-grayscale-text-negative);
20
+ --brand-grayscale-text-disabled: var(--dark-grayscale-text-disabled);
21
+
22
+ --brand-primary-surface-subtle: var(--dark-primary-surface-subtle);
23
+ --brand-primary-surface-light: var(--dark-primary-surface-light);
24
+ --brand-primary-surface-default: var(--dark-primary-surface-default);
25
+ --brand-primary-surface-dark: var(--dark-primary-surface-dark);
26
+ --brand-primary-border-subtle: var(--dark-primary-border-subtle);
27
+ --brand-primary-border-default: var(--dark-primary-border-default);
28
+ --brand-primary-border-dark: var(--dark-primary-border-dark);
29
+ --brand-primary-border-light: var(--dark-primary-border-light);
30
+ --brand-primary-text-icon: var(--dark-primary-text-text);
31
+
32
+ --brand-secondary-surface-subtle: var(--dark-secondary-surface-subtle);
33
+ --brand-secondary-surface-light: var(--dark-secondary-surface-light);
34
+ --brand-secondary-surface-default: var(--dark-secondary-surface-default);
35
+ --brand-secondary-surface-dark: var(--dark-secondary-surface-dark);
36
+ --brand-secondary-border-subtle: var(--dark-secondary-border-subtle);
37
+ --brand-secondary-border-default: var(--dark-secondary-border-default);
38
+ --brand-secondary-border-dark: var(--dark-secondary-border-dark);
39
+ --brand-secondary-border-light: var(--dark-secondary-border-light);
40
+ --brand-secondary-text-icon: var(--dark-secondary-text-text);
41
+
42
+ --brand-accent-primary-surface-light: var(--dark-accent-primary-surface-light);
43
+ --brand-accent-primary-surface-subtle: var(--dark-accent-primary-surface-subtle);
44
+ --brand-accent-primary-surface-default: var(--dark-accent-primary-surface-default);
45
+ --brand-accent-primary-surface-dark: var(--dark-accent-primary-surface-dark);
46
+ --brand-accent-primary-border-subtle: var(--dark-accent-primary-border-subtle);
47
+ --brand-accent-primary-border-default: var(--dark-accent-primary-border-default);
48
+ --brand-accent-primary-border-dark: var(--dark-accent-primary-border-dark);
49
+ --brand-accent-primary-border-light: var(--dark-accent-primary-border-light);
50
+ --brand-accent-primary-text-icon: var(--dark-accent-primary-text-text);
51
+
52
+ --brand-accent-secondary-surface-subtle: var(--dark-accent-secondary-surface-subtle);
53
+ --brand-accent-secondary-surface-light: var(--dark-accent-secondary-surface-light);
54
+ --brand-accent-secondary-surface-default: var(--dark-accent-secondary-surface-default);
55
+ --brand-accent-secondary-surface-dark: var(--dark-accent-secondary-surface-dark);
56
+ --brand-accent-secondary-border-subtle: var(--dark-accent-secondary-border-subtle);
57
+ --brand-accent-secondary-border-default: var(--dark-accent-secondary-border-default);
58
+ --brand-accent-secondary-border-dark: var(--dark-accent-secondary-border-dark);
59
+ --brand-accent-secondary-border-light: var(--dark-accent-secondary-border-light);
60
+ --brand-accent-secondary-text-icon: var(--dark-accent-secondary-text-text);
61
+
62
+ --brand-accent-tertiary-surface-subtle: var(--dark-accent-tertiary-surface-subtle);
63
+ --brand-accent-tertiary-surface-light: var(--dark-accent-tertiary-surface-light);
64
+ --brand-accent-tertiary-surface-default: var(--dark-accent-tertiary-surface-default);
65
+ --brand-accent-tertiary-surface-dark: var(--dark-accent-tertiary-surface-dark);
66
+ --brand-accent-tertiary-border-subtle: var(--dark-accent-tertiary-border-subtle);
67
+ --brand-accent-tertiary-border-default: var(--dark-accent-tertiary-border-default);
68
+ --brand-accent-tertiary-border-dark: var(--dark-accent-tertiary-border-dark);
69
+ --brand-accent-tertiary-border-light: var(--dark-accent-tertiary-border-light);
70
+ --brand-accent-tertiary-text-icon: var(--dark-accent-tertiary-text-text);
71
+
72
+ --brand-error-surface-subtle: var(--dark-error-surface-subtle);
73
+ --brand-error-surface-light: var(--dark-error-surface-light);
74
+ --brand-error-surface-default: var(--dark-error-surface-default);
75
+ --brand-error-surface-dark: var(--dark-error-surface-dark);
76
+ --brand-error-border-subtle: var(--dark-error-border-subtle);
77
+ --brand-error-border-default: var(--dark-error-border-default);
78
+ --brand-error-border-dark: var(--dark-error-border-dark);
79
+ --brand-error-border-light: var(--dark-error-border-light);
80
+ --brand-error-text-icon: var(--dark-error-text-text);
81
+
82
+ --brand-warning-orange-surface-subtle: var(--dark-warning-orange-surface-subtle);
83
+ --brand-warning-orange-surface-light: var(--dark-warning-orange-surface-light);
84
+ --brand-warning-orange-surface-default: var(--dark-warning-orange-surface-default);
85
+ --brand-warning-orange-surface-dark: var(--dark-warning-orange-surface-dark);
86
+ --brand-warning-orange-border-subtle: var(--dark-warning-orange-border-subtle);
87
+ --brand-warning-orange-border-default: var(--dark-warning-orange-border-default);
88
+ --brand-warning-orange-border-dark: var(--dark-warning-orange-border-dark);
89
+ --brand-warning-orange-border-light: var(--dark-warning-orange-border-light);
90
+ --brand-warning-orange-text-icon: var(--dark-warning-orange-text-text);
91
+
92
+ --brand-warning-yellow-surface-subtle: var(--dark-warning-yellow-surface-subtle);
93
+ --brand-warning-yellow-surface-light: var(--dark-warning-yellow-surface-light);
94
+ --brand-warning-yellow-surface-default: var(--dark-warning-yellow-surface-default);
95
+ --brand-warning-yellow-surface-dark: var(--dark-warning-yellow-surface-dark);
96
+ --brand-warning-yellow-border-subtle: var(--dark-warning-yellow-border-subtle);
97
+ --brand-warning-yellow-border-default: var(--dark-warning-yellow-border-default);
98
+ --brand-warning-yellow-border-dark: var(--dark-warning-yellow-border-dark);
99
+ --brand-warning-yellow-border-light: var(--dark-warning-yellow-border-light);
100
+ --brand-warning-yellow-text-icon: var(--dark-warning-yellow-text-text);
101
+
102
+ --brand-success-surface-subtle: var(--dark-success-surface-subtle);
103
+ --brand-success-surface-light: var(--dark-success-surface-light);
104
+ --brand-success-surface-default: var(--dark-success-surface-default);
105
+ --brand-success-surface-dark: var(--dark-success-surface-dark);
106
+ --brand-success-border-subtle: var(--dark-success-border-subtle);
107
+ --brand-success-border-default: var(--dark-success-border-default);
108
+ --brand-success-border-dark: var(--dark-success-border-dark);
109
+ --brand-success-border-light: var(--dark-success-border-light);
110
+ --brand-success-text-icon: var(--dark-success-text-text);
111
+
112
+ /* Colour Zones - Brand 2 */
113
+
114
+ --brand-zone-orange-light: var(--dark-zone-orange-light);
115
+ --brand-zone-orange-solid: var(--dark-zone-orange-solid);
116
+ --brand-zone-orange-dark: var(--dark-zone-orange-dark);
117
+
118
+ --brand-zone-yellow-light: var(--dark-zone-yellow-light);
119
+ --brand-zone-yellow-solid: var(--dark-zone-yellow-solid);
120
+ --brand-zone-yellow-dark: var(--dark-zone-yellow-dark);
121
+
122
+ --brand-zone-pink-light: var(--dark-zone-pink-light);
123
+ --brand-zone-pink-solid: var(--dark-zone-pink-solid);
124
+ --brand-zone-pink-dark: var(--dark-zone-pink-dark);
125
+
126
+ --brand-zone-blue-light: var(--dark-zone-blue-light);
127
+ --brand-zone-blue-solid: var(--dark-zone-blue-solid);
128
+ --brand-zone-blue-dark: var(--dark-zone-blue-dark);
129
+
130
+ --brand-zone-red-light: var(--dark-zone-red-light);
131
+ --brand-zone-red-solid: var(--dark-zone-red-solid);
132
+ --brand-zone-red-dark: var(--dark-zone-red-dark);
133
+
134
+ --brand-zone-green-light: var(--dark-zone-green-light);
135
+ --brand-zone-green-solid: var(--dark-zone-green-solid);
136
+ --brand-zone-green-dark: var(--dark-zone-green-dark);
137
+
138
+ /* TODO); add Brand 1 colours (these are brand 2 colours) */
139
+
140
+ --brand-zone-purple-primary-light: var(--dark-zone-purple-primary-light);
141
+ --brand-zone-purple-primary-solid: var(--dark-zone-purple-primary-solid);
142
+ --brand-zone-purple-primary-dark: var(--dark-zone-purple-primary-dark);
143
+
144
+ --brand-zone-purple-secondary-light: var(--dark-zone-purple-secondary-light);
145
+ --brand-zone-purple-secondary-solid: var(--dark-zone-purple-secondary-solid);
146
+ --brand-zone-purple-secondary-dark: var(--dark-zone-purple-secondary-dark);
147
+
148
+ --brand-zone-grey-light: var(--dark-zone-grey-light);
149
+ --brand-zone-grey-solid: var(--dark-zone-grey-solid);
150
+ --brand-zone-grey-dark: var(--dark-zone-grey-dark);
151
+ }
152
+ }
package/assets/styles/brand/_palette_dark.css ADDED
@@ -0,0 +1,148 @@
1
+ :root {
2
+ --dark-body-background-color: #494549;
3
+ --dark-grayscale-surface-subtle: #f3f2f4;
4
+ --dark-grayscale-surface-default: #847d85;
5
+ --dark-grayscale-surface-disabled: #c6c3c7;
6
+ --dark-grayscale-border-default: #9d979d;
7
+ --dark-grayscale-border-disabled: #ada8ad;
8
+ --dark-grayscale-border-dark: #494549;
9
+ --dark-grayscale-text-title: #373538;
10
+ --dark-grayscale-text-body: #494549;
11
+ --dark-grayscale-text-form: #48464d;
12
+ --dark-grayscale-text-subtitle: #787279;
13
+ --dark-grayscale-text-caption: #847d85;
14
+ --dark-grayscale-text-negative: #f3f2f3;
15
+ --dark-grayscale-text-disabled: #c6c3c7;
16
+
17
+ --dark-focus-visible-colour: #4169e1;
18
+
19
+ --dark-primary-surface-subtle: #f2e8f2;
20
+ --dark-primary-surface-light: #d5b9d7;
21
+ --dark-primary-surface-default: #781d7d;
22
+ --dark-primary-surface-dark: #551559;
23
+ --dark-primary-border-subtle: #d5b9d7;
24
+ --dark-primary-border-default: #781d7d;
25
+ --dark-primary-border-dark: #421045;
26
+ --dark-primary-border-light: #c197c3;
27
+ --dark-primary-text-icon: #781d7d;
28
+
29
+ --dark-secondary-surface-subtle: #fef1eb;
30
+ --dark-secondary-surface-light: #fbd5c1;
31
+ --dark-secondary-surface-default: #f37737;
32
+ --dark-secondary-surface-dark: #ad5427;
33
+ --dark-secondary-border-subtle: #fbd5c1;
34
+ --dark-secondary-border-default: #f37737;
35
+ --dark-secondary-border-dark: #86411e;
36
+ --dark-secondary-border-light: #f9c0a3;
37
+ --dark-secondary-text-icon: #f37737;
38
+
39
+ --dark-accent-primary-surface-light: #e6f8fc;
40
+ --dark-accent-primary-surface-subtle: #b0eaf7;
41
+ --dark-accent-primary-surface-default: #00bbe4;
42
+ --dark-accent-primary-surface-dark: #0085a2;
43
+ --dark-accent-primary-border-subtle: #b0eaf7;
44
+ --dark-accent-primary-border-default: #00bbe4;
45
+ --dark-accent-primary-border-dark: #00677d;
46
+ --dark-accent-primary-border-light: #8ae0f3;
47
+ --dark-accent-primary-text-icon: #00bbe4;
48
+
49
+ --dark-accent-secondary-surface-subtle: #f4f9ec;
50
+ --dark-accent-secondary-surface-light: #dcedc3;
51
+ --dark-accent-secondary-surface-default: #8ec63f;
52
+ --dark-accent-secondary-surface-dark: #658d2d;
53
+ --dark-accent-secondary-border-subtle: #dcedc3;
54
+ --dark-accent-secondary-border-default: #8ec63f;
55
+ --dark-accent-secondary-border-dark: #4e6d23;
56
+ --dark-accent-secondary-border-light: #cbe5a7;
57
+ --dark-accent-secondary-text-icon: #8ec63f;
58
+
59
+ --dark-accent-tertiary-surface-subtle: #feecf4;
60
+ --dark-accent-tertiary-surface-light: #fac4dd;
61
+ --dark-accent-tertiary-surface-default: #f04292;
62
+ --dark-accent-tertiary-surface-dark: #aa2f68;
63
+ --dark-accent-tertiary-border-subtle: #fac4dd;
64
+ --dark-accent-tertiary-border-default: #f04292;
65
+ --dark-accent-tertiary-border-dark: #842450;
66
+ --dark-accent-tertiary-border-light: #f8a8cd;
67
+ --dark-accent-tertiary-text-icon: #f04292;
68
+
69
+ --dark-error-surface-subtle: #fceaed;
70
+ --dark-error-surface-light: #f5bdc6;
71
+ --dark-error-surface-default: #e02947;
72
+ --dark-error-surface-dark: #9f1d32;
73
+ --dark-error-border-subtle: #f5bdc6;
74
+ --dark-error-border-default: #e02947;
75
+ --dark-error-border-dark: #7b1727;
76
+ --dark-error-border-light: #f19daa;
77
+ --dark-error-text-icon: #e02947;
78
+
79
+ --dark-warning-orange-surface-subtle: #fef5e6;
80
+ --dark-warning-orange-surface-light: #fce0b0;
81
+ --dark-warning-orange-surface-default: #f59b00;
82
+ --dark-warning-orange-surface-dark: #ae6e00;
83
+ --dark-warning-orange-border-subtle: #fce0b0;
84
+ --dark-warning-orange-border-default: #f59b00;
85
+ --dark-warning-orange-border-dark: #875500;
86
+ --dark-warning-orange-border-light: #fad18a;
87
+ --dark-warning-orange-text-icon: #f59b00;
88
+
89
+ --dark-warning-yellow-surface-subtle: #fffbe6;
90
+ --dark-warning-yellow-surface-light: #fff4b0;
91
+ --dark-warning-yellow-surface-default: #ffda00;
92
+ --dark-warning-yellow-surface-dark: #b59b00;
93
+ --dark-warning-yellow-border-subtle: #fff4b0;
94
+ --dark-warning-yellow-border-default: #ffda00;
95
+ --dark-warning-yellow-border-dark: #8c7800;
96
+ --dark-warning-yellow-border-light: #ffee8a;
97
+ --dark-warning-yellow-text-icon: #ffda00;
98
+
99
+ --dark-success-surface-subtle: #e6f8f7;
100
+ --dark-success-surface-light: #b2eae5;
101
+ --dark-success-surface-default: #07bbac;
102
+ --dark-success-surface-dark: #05857a;
103
+ --dark-success-border-subtle: #b2eae5;
104
+ --dark-success-border-default: #07bbac;
105
+ --dark-success-border-dark: #04675f;
106
+ --dark-success-border-light: #8de0d9;
107
+ --dark-success-text-icon: #07bbac;
108
+
109
+ /* Colour Zones - Brand 1 */
110
+
111
+ --dark-zone-orange-light: #fbd5c1;
112
+ --dark-zone-orange-solid: #f37737;
113
+ --dark-zone-orange-dark: #ad5427;
114
+
115
+ --dark-zone-yellow-light: #fce0b0;
116
+ --dark-zone-yellow-solid: #f59b00;
117
+ --dark-zone-yellow-dark: #ae6e00;
118
+
119
+ --dark-zone-pink-light: #fac4dd;
120
+ --dark-zone-pink-solid: #f04292;
121
+ --dark-zone-pink-dark: #aa2f68;
122
+
123
+ --dark-zone-blue-light: #b0eaf7;
124
+ --dark-zone-blue-solid: #00bbe4;
125
+ --dark-zone-blue-dark: #0085a2;
126
+
127
+ --dark-zone-red-light: #f5bdc6;
128
+ --dark-zone-red-solid: #e02947;
129
+ --dark-zone-red-dark: #9f1d32;
130
+
131
+ --dark-zone-green-light: #dcedc3;
132
+ --dark-zone-green-solid: #8ec63f;
133
+ --dark-zone-green-dark: #658d2d;
134
+
135
+ /* TODO: add Brand 1 colours (these are brand 2 colours) */
136
+
137
+ --dark-zone-purple-primary-light: #d3c0ed;
138
+ --dark-zone-purple-primary-solid: #7033c4;
139
+ --dark-zone-purple-primary-dark: #50248b;
140
+
141
+ --dark-zone-purple-secondary-light: #efd9fd;
142
+ --dark-zone-purple-secondary-solid: #ca85fa;
143
+ --dark-zone-purple-secondary-dark: #8f5eb2;
144
+
145
+ --dark-zone-grey-light: #c9c9c9;
146
+ --dark-zone-grey-solid: #a9a9a9;
147
+ --dark-zone-grey-dark: #858585;
148
+ }
package/assets/styles/brand/_palette_light.css ADDED
@@ -0,0 +1,148 @@
1
+ :root {
2
+ --light-body-background-color: #f3f2f4;
3
+ --light-grayscale-surface-subtle: #f3f2f4;
4
+ --light-grayscale-surface-default: #847fbc;
5
+ --light-grayscale-surface-disabled: #c6c4ca;
6
+ --light-grayscale-border-default: #9d99a3;
7
+ --light-grayscale-border-disabled: #ada9b2;
8
+ --light-grayscale-border-dark: #5e5a63;
9
+ --light-grayscale-text-title: #37353b;
10
+ --light-grayscale-text-body: #48464d;
11
+ --light-grayscale-text-form: #48464d;
12
+ --light-grayscale-text-subtitle: #78747f;
13
+ --light-grayscale-text-caption: #847fbc;
14
+ --light-grayscale-text-negative: #f3f2f4;
15
+ --light-grayscale-text-disabled: #ada9b2;
16
+
17
+ --light-focus-visible-colour: #4169e1;
18
+
19
+ --light-primary-surface-subtle: #f1ebf9;
20
+ --light-primary-surface-light: #d3c0ed;
21
+ --light-primary-surface-default: #7033c4;
22
+ --light-primary-surface-dark: #50248b;
23
+ --light-primary-border-subtle: #d3c0ed;
24
+ --light-primary-border-default: #7033c4;
25
+ --light-primary-border-dark: #3e1c6c;
26
+ --light-primary-border-light: #bda1e4;
27
+ --light-primary-text-icon: #7033c4;
28
+
29
+ --light-secondary-surface-subtle: #faf3ff;
30
+ --light-secondary-surface-light: #efd9fd;
31
+ --light-secondary-surface-default: #ca85fa;
32
+ --light-secondary-surface-dark: #8f5eb2;
33
+ --light-secondary-border-subtle: #efd9fd;
34
+ --light-secondary-border-default: #ca85fa;
35
+ --light-secondary-border-dark: #6f498a;
36
+ --light-secondary-border-light: #e7c7fd;
37
+ --light-secondary-text-icon: #ca85fa;
38
+
39
+ --light-accent-primary-surface-light: #fff7eb;
40
+ --light-accent-primary-surface-subtle: #ffe6c0;
41
+ --light-accent-primary-surface-default: #ffae33;
42
+ --light-accent-primary-surface-dark: #b57c24;
43
+ --light-accent-primary-border-subtle: #ffe6c0;
44
+ --light-accent-primary-border-default: #ffae33;
45
+ --light-accent-primary-border-dark: #8c601c;
46
+ --light-accent-primary-border-light: #ffdaa1;
47
+ --light-accent-primary-text-icon: #ffae33;
48
+
49
+ --light-accent-secondary-surface-subtle: #fbeaf3;
50
+ --light-accent-secondary-surface-light: #f1bed9;
51
+ --light-accent-secondary-surface-default: #d22d85;
52
+ --light-accent-secondary-surface-dark: #95205e;
53
+ --light-accent-secondary-border-subtle: #f1bed9;
54
+ --light-accent-secondary-border-default: #d22d85;
55
+ --light-accent-secondary-border-dark: #741949;
56
+ --light-accent-secondary-border-light: #ea9ec7;
57
+ --light-accent-secondary-text-icon: #d22d85;
58
+
59
+ --light-accent-tertiary-surface-subtle: #e9eff9;
60
+ --light-accent-tertiary-surface-light: #bccded;
61
+ --light-accent-tertiary-surface-default: #265ec5;
62
+ --light-accent-tertiary-surface-dark: #1b438c;
63
+ --light-accent-tertiary-border-subtle: #bccded;
64
+ --light-accent-tertiary-border-default: #265ec5;
65
+ --light-accent-tertiary-border-dark: #15346c;
66
+ --light-accent-tertiary-border-light: #9bb5e4;
67
+ --light-accent-tertiary-text-icon: #265ec5;
68
+
69
+ --light-error-surface-subtle: #faebee;
70
+ --light-error-surface-light: #f0c2ca;
71
+ --light-error-surface-default: #ce3b45;
72
+ --light-error-surface-dark: #922a3c;
73
+ --light-error-border-subtle: #f0c2ca;
74
+ --light-error-border-default: #ce3b54;
75
+ --light-error-border-dark: #71202e;
76
+ --light-error-border-light: #e8a5b0;
77
+ --light-error-text-icon: #ce3b54;
78
+
79
+ --light-warning-orange-surface-subtle: #fff7eb;
80
+ --light-warning-orange-surface-light: #ffe6c0;
81
+ --light-warning-orange-surface-default: #ffae33;
82
+ --light-warning-orange-surface-dark: #b57c24;
83
+ --light-warning-orange-border-subtle: #ffe6c0;
84
+ --light-warning-orange-border-default: #ffae33;
85
+ --light-warning-orange-border-dark: #8c601c;
86
+ --light-warning-orange-border-light: #ffdaa1;
87
+ --light-warning-orange-text-icon: #ffae33;
88
+
89
+ --light-warning-yellow-surface-subtle: #fffae6;
90
+ --light-warning-yellow-surface-light: #fff0b0;
91
+ --light-warning-yellow-surface-default: #ffd000;
92
+ --light-warning-yellow-surface-dark: #b59400;
93
+ --light-warning-yellow-border-subtle: #fff0b0;
94
+ --light-warning-yellow-border-default: #ffd000;
95
+ --light-warning-yellow-border-dark: #8c7200;
96
+ --light-warning-yellow-border-light: #ffe9ba;
97
+ --light-warning-yellow-text-icon: #ffd000;
98
+
99
+ --light-success-surface-subtle: #ebf8f3;
100
+ --light-success-surface-light: #c2ebd9;
101
+ --light-success-surface-default: #39bd83;
102
+ --light-success-surface-dark: #28865d;
103
+ --light-success-border-subtle: #c2ebd9;
104
+ --light-success-border-default: #39bd83;
105
+ --light-success-border-dark: #1f6848;
106
+ --light-success-border-light: #a4e1c6;
107
+ --light-success-text-icon: #39bd83;
108
+
109
+ /* Colour Zones - Brand 2 */
110
+
111
+ --light-zone-orange-light: #ffe6c0;
112
+ --light-zone-orange-solid: #ffae33;
113
+ --light-zone-orange-dark: #b57c24;
114
+
115
+ --light-zone-yellow-light: #ffe6c0;
116
+ --light-zone-yellow-solid: #ffae33;
117
+ --light-zone-yellow-dark: #b57c24;
118
+
119
+ --light-zone-pink-light: #f1bed9;
120
+ --light-zone-pink-solid: #d22d85;
121
+ --light-zone-pink-dark: #95205e;
122
+
123
+ --light-zone-blue-light: #bccded;
124
+ --light-zone-blue-solid: #265ec5;
125
+ --light-zone-blue-dark: #1b438c;
126
+
127
+ --light-zone-red-light: #f0c2ca;
128
+ --light-zone-red-solid: #ce3b54;
129
+ --light-zone-red-dark: #922a3c;
130
+
131
+ --light-zone-green-light: #c2ebd9;
132
+ --light-zone-green-solid: #39bd83;
133
+ --light-zone-green-dark: #28865d;
134
+
135
+ /* TODO: add Brand 1 colours (these are brand 2 colours) */
136
+
137
+ --light-zone-purple-primary-light: #d3c0ed;
138
+ --light-zone-purple-primary-solid: #7033c4;
139
+ --light-zone-purple-primary-dark: #50248b;
140
+
141
+ --light-zone-purple-secondary-light: #efd9fd;
142
+ --light-zone-purple-secondary-solid: #ca85fa;
143
+ --light-zone-purple-secondary-dark: #8f5eb2;
144
+
145
+ --light-zone-grey-light: #c9c9c9;
146
+ --light-zone-grey-solid: #a9a9a9;
147
+ --light-zone-grey-dark: #858585;
148
+ }