@code-coaching/vuetiful 0.24.1 → 0.24.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/themes/theme-vuetiful.css +38 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@code-coaching/vuetiful",
3
- "version": "0.24.1",
3
+ "version": "0.24.2",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
package/src/themes/theme-vuetiful.css CHANGED
@@ -3,125 +3,117 @@
3
3
 
4
4
  :root {
5
5
  /* =~= Theme Properties =~= */
6
- --theme-font-family-base: 'Quicksand', sans-serif;
7
- --theme-font-family-heading: 'Quicksand', sans-serif;
8
- --theme-font-color-base: var(--color-surface-900);
9
- --theme-font-color-dark: var(--color-tertiary-50);
6
+ --theme-font-family-base: 'Quicksand', system;
7
+ --theme-font-family-heading: 'Quicksand', system;
8
+ --theme-font-color-base: 0 0 0;
9
+ --theme-font-color-dark: 255 255 255;
10
10
  --theme-rounded-base: 12px;
11
11
  --theme-rounded-container: 12px;
12
12
  --theme-border-base: 0px;
13
- /* =~= Theme On-X Colors =~= */
13
+
14
+ /* =~= Theme On-X Colors =~= */
14
15
  --on-primary: 0 0 0;
15
16
  --on-secondary: 0 0 0;
16
17
  --on-tertiary: 0 0 0;
17
18
  --on-success: 0 0 0;
18
19
  --on-warning: 0 0 0;
19
- --on-error: 255 255 255;
20
- --on-surface: 255 255 255;
20
+ --on-error: 0 0 0;
21
+ --on-surface: 0 0 0;
22
+
21
23
  /* =~= Theme Colors =~= */
22
- /* primary | #ec4899 */
24
+
25
+ --color-primary: 236 72 153; /* ⬅ #EC4899 */
23
26
  --color-primary-50: 252 228 240; /* ⬅ #fce4f0 */
24
27
  --color-primary-100: 251 218 235; /* ⬅ #fbdaeb */
25
28
  --color-primary-200: 250 209 230; /* ⬅ #fad1e6 */
26
29
  --color-primary-300: 247 182 214; /* ⬅ #f7b6d6 */
27
30
  --color-primary-400: 242 127 184; /* ⬅ #f27fb8 */
28
- --color-primary-500: 236 72 153; /* ⬅ #ec4899 */
31
+ --color-primary-500: 236 72 153; /* ⬅ #EC4899 */
29
32
  --color-primary-600: 212 65 138; /* ⬅ #d4418a */
30
33
  --color-primary-700: 177 54 115; /* ⬅ #b13673 */
31
34
  --color-primary-800: 142 43 92; /* ⬅ #8e2b5c */
32
35
  --color-primary-900: 116 35 75; /* ⬅ #74234b */
33
- /* secondary | #06b6d4 */
36
+
37
+ --color-secondary: 6 182 212; /* ⬅ #06B6D4 */
34
38
  --color-secondary-50: 218 244 249; /* ⬅ #daf4f9 */
35
39
  --color-secondary-100: 205 240 246; /* ⬅ #cdf0f6 */
36
40
  --color-secondary-200: 193 237 244; /* ⬅ #c1edf4 */
37
41
  --color-secondary-300: 155 226 238; /* ⬅ #9be2ee */
38
42
  --color-secondary-400: 81 204 225; /* ⬅ #51cce1 */
39
- --color-secondary-500: 6 182 212; /* ⬅ #06b6d4 */
43
+ --color-secondary-500: 6 182 212; /* ⬅ #06B6D4 */
40
44
  --color-secondary-600: 5 164 191; /* ⬅ #05a4bf */
41
45
  --color-secondary-700: 5 137 159; /* ⬅ #05899f */
42
46
  --color-secondary-800: 4 109 127; /* ⬅ #046d7f */
43
47
  --color-secondary-900: 3 89 104; /* ⬅ #035968 */
44
- /* tertiary | #14b8a6 */
48
+
49
+ --color-tertiary: 20 184 166; /* ⬅ #14B8A6 */
45
50
  --color-tertiary-50: 220 244 242; /* ⬅ #dcf4f2 */
46
51
  --color-tertiary-100: 208 241 237; /* ⬅ #d0f1ed */
47
52
  --color-tertiary-200: 196 237 233; /* ⬅ #c4ede9 */
48
53
  --color-tertiary-300: 161 227 219; /* ⬅ #a1e3db */
49
54
  --color-tertiary-400: 91 205 193; /* ⬅ #5bcdc1 */
50
- --color-tertiary-500: 20 184 166; /* ⬅ #14b8a6 */
55
+ --color-tertiary-500: 20 184 166; /* ⬅ #14B8A6 */
51
56
  --color-tertiary-600: 18 166 149; /* ⬅ #12a695 */
52
57
  --color-tertiary-700: 15 138 125; /* ⬅ #0f8a7d */
53
58
  --color-tertiary-800: 12 110 100; /* ⬅ #0c6e64 */
54
59
  --color-tertiary-900: 10 90 81; /* ⬅ #0a5a51 */
55
- /* success | #84cc16 */
60
+
61
+ --color-success: 132 204 22; /* ⬅ #84CC16 */
56
62
  --color-success-50: 237 247 220; /* ⬅ #edf7dc */
57
63
  --color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
58
64
  --color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
59
65
  --color-success-300: 206 235 162; /* ⬅ #ceeba2 */
60
66
  --color-success-400: 169 219 92; /* ⬅ #a9db5c */
61
- --color-success-500: 132 204 22; /* ⬅ #84cc16 */
67
+ --color-success-500: 132 204 22; /* ⬅ #84CC16 */
62
68
  --color-success-600: 119 184 20; /* ⬅ #77b814 */
63
69
  --color-success-700: 99 153 17; /* ⬅ #639911 */
64
70
  --color-success-800: 79 122 13; /* ⬅ #4f7a0d */
65
71
  --color-success-900: 65 100 11; /* ⬅ #41640b */
66
- /* warning | #eab308 */
72
+
73
+ --color-warning: 234 179 8; /* ⬅ #EAB308 */
67
74
  --color-warning-50: 252 244 218; /* ⬅ #fcf4da */
68
75
  --color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
69
76
  --color-warning-200: 250 236 193; /* ⬅ #faecc1 */
70
77
  --color-warning-300: 247 225 156; /* ⬅ #f7e19c */
71
78
  --color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
72
- --color-warning-500: 234 179 8; /* ⬅ #eab308 */
79
+ --color-warning-500: 234 179 8; /* ⬅ #EAB308 */
73
80
  --color-warning-600: 211 161 7; /* ⬅ #d3a107 */
74
81
  --color-warning-700: 176 134 6; /* ⬅ #b08606 */
75
82
  --color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
76
83
  --color-warning-900: 115 88 4; /* ⬅ #735804 */
77
- /* error | #ef4444 */
84
+
85
+ --color-error: 239 68 68; /* ⬅ #EF4444 */
78
86
  --color-error-50: 253 227 227; /* ⬅ #fde3e3 */
79
87
  --color-error-100: 252 218 218; /* ⬅ #fcdada */
80
88
  --color-error-200: 251 208 208; /* ⬅ #fbd0d0 */
81
89
  --color-error-300: 249 180 180; /* ⬅ #f9b4b4 */
82
90
  --color-error-400: 244 124 124; /* ⬅ #f47c7c */
83
- --color-error-500: 239 68 68; /* ⬅ #ef4444 */
91
+ --color-error-500: 239 68 68; /* ⬅ #EF4444 */
84
92
  --color-error-600: 215 61 61; /* ⬅ #d73d3d */
85
93
  --color-error-700: 179 51 51; /* ⬅ #b33333 */
86
94
  --color-error-800: 143 41 41; /* ⬅ #8f2929 */
87
95
  --color-error-900: 117 33 33; /* ⬅ #752121 */
88
- /* surface | #6366f1 */
96
+
97
+ --color-surface: 99 102 241; /* ⬅ #6366F1 */
89
98
  --color-surface-50: 232 232 253; /* ⬅ #e8e8fd */
90
99
  --color-surface-100: 224 224 252; /* ⬅ #e0e0fc */
91
100
  --color-surface-200: 216 217 252; /* ⬅ #d8d9fc */
92
101
  --color-surface-300: 193 194 249; /* ⬅ #c1c2f9 */
93
102
  --color-surface-400: 146 148 245; /* ⬅ #9294f5 */
94
- --color-surface-500: 99 102 241; /* ⬅ #6366f1 */
103
+ --color-surface-500: 99 102 241; /* ⬅ #6366F1 */
95
104
  --color-surface-600: 89 92 217; /* ⬅ #595cd9 */
96
105
  --color-surface-700: 74 77 181; /* ⬅ #4a4db5 */
97
106
  --color-surface-800: 59 61 145; /* ⬅ #3b3d91 */
98
107
  --color-surface-900: 49 50 118; /* ⬅ #313276 */
99
108
  }
100
109
 
101
- [data-theme='vuetiful'] h1,
102
- [data-theme='vuetiful'] h2,
103
- [data-theme='vuetiful'] h3,
104
- [data-theme='vuetiful'] h4,
105
- [data-theme='vuetiful'] h5,
106
- [data-theme='vuetiful'] h6,
107
- [data-theme='vuetiful'] a,
108
- [data-theme='vuetiful'] button {
109
- font-weight: bold;
110
- }
111
-
112
- /* Applied to body with `<body data-theme="vuetiful">` */
113
- /* Created with: https://csshero.org/mesher/ */
114
- [data-theme='vuetiful'] {
115
- /* prettier-ignore */
116
- background-image:
117
- radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
118
- radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
119
- radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
110
+ [data-theme='custom'] {
111
+ background-image: radial-gradient(at 76% 0%, hsla(189, 100%, 56%, 0.36) 0px, transparent 50%),
112
+ radial-gradient(at 1% 0%, hsla(340, 100%, 76%, 0.26) 0px, transparent 50%),
113
+ radial-gradient(at 20% 100%, hsla(241, 100%, 70%, 0.47) 0px, transparent 50%);
120
114
  }
121
- .dark [data-theme='vuetiful'] {
122
- /* prettier-ignore */
123
- background-image:
124
- radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),
125
- radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%),
126
- radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%);
115
+ .dark [data-theme='custom'] {
116
+ background-image: radial-gradient(at 76% 0%, hsla(189, 100%, 56%, 0.2) 0px, transparent 50%),
117
+ radial-gradient(at 1% 0%, hsla(340, 100%, 76%, 0.15) 0px, transparent 50%),
118
+ radial-gradient(at 20% 100%, hsla(241, 100%, 70%, 0.3) 0px, transparent 50%);
127
119
  }