@digigov/css 0.30.0 → 0.30.1-navlist.alpha.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 (17) hide show
  1. package/defaultTheme/button.json +75 -0
  2. package/{defaultTheme.js → defaultTheme/index.js} +15 -0
  3. package/defaultTheme/typography.json +188 -0
  4. package/dist/base/index.css +1 -1
  5. package/dist/base.css +1 -1
  6. package/dist/base.js +1 -1
  7. package/dist/components.css +1 -1
  8. package/dist/components.js +1 -1
  9. package/dist/digigov.css +1 -1
  10. package/package.json +8 -5
  11. package/src/components/button.css +73 -51
  12. package/src/components/dropdown.css +1 -1
  13. package/src/components/form.css +0 -1
  14. package/src/components/layout.css +1 -1
  15. package/src/components/nav.css +6 -3
  16. package/src/components/typography.css +64 -16
  17. package/themes.plugin.js +116 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digigov/css",
3
- "version": "0.30.0",
3
+ "version": "0.30.1-navlist.alpha.1",
4
4
  "description": "Digigov CSS - Tailwind CSS Components",
5
5
  "author": "GRNET Devs <devs@lists.grnet.gr>",
6
6
  "license": "BSD-2-Clause",
@@ -24,7 +24,7 @@
24
24
  "dist",
25
25
  "!dist/components",
26
26
  "index.js",
27
- "defaultTheme.js",
27
+ "defaultTheme",
28
28
  "src",
29
29
  "colors",
30
30
  "themes.plugin.js",
@@ -52,7 +52,8 @@
52
52
  "@digigov/postcss-banner": "0.3.21",
53
53
  "rimraf": "3.0.2",
54
54
  "postcss-js": "4.0.0",
55
- "postcss-load-config": "3.1.4"
55
+ "postcss-load-config": "3.1.4",
56
+ "publint": "0.1.8"
56
57
  },
57
58
  "scripts": {
58
59
  "preutilities": "DIGIGOV_CSS_BUILD=TRUE postcss --config src/utilities src/utilities/index.css --base src --dir dist",
@@ -66,9 +67,11 @@
66
67
  "postbase": "prejss-cli dist/base.css --format commonjs",
67
68
  "full": "cat dist/base.css dist/components.css dist/utilities.css > dist/digigov.css ",
68
69
  "start": "next dev",
69
- "build": "rimraf dist && npm run utilities && npm run components && npm run base && npm run full"
70
+ "build": "rimraf dist && npm run utilities && npm run components && npm run base && npm run full",
71
+ "publint": "publint"
70
72
  },
71
73
  "dependencies": {
72
- "@fontsource/roboto": "4.4.0"
74
+ "@fontsource/roboto": "4.4.0",
75
+ "publint": "0.1.8"
73
76
  }
74
77
  }
package/src/components/button.css CHANGED
@@ -1,11 +1,16 @@
1
1
  .govgr-btn {
2
- @apply tracking-wide leading-relaxed font-medium text-base md:text-lg cursor-pointer
3
- m-0 mb-8 px-5 py-2 w-max min-h-10 md:min-h-12
4
- print:px-4
5
- flex gap-x-3 items-center ;
2
+ @apply leading-relaxed font-medium cursor-pointer
3
+ m-0 mb-8 w-max min-h-10 md:min-h-12
4
+ flex gap-x-3 items-center;
5
+ border-radius: var(--btn-border-radius);
6
+ padding: var(--btn-padding);
7
+ letter-spacing: var(--btn-letter-spacing);
8
+ font-size: var(--btn-font-size);
6
9
  &:focus {
7
- -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 6px var(--color-base-content),0 0 0 10px var(--color-focus);
8
- box-shadow: 0 0 0 2px var(--color-white), 0 0 0 6px var(--color-base-content),0 0 0 10px var(--color-focus);
10
+ -webkit-box-shadow: 0 0 0 2px var(--color-white),
11
+ 0 0 0 6px var(--color-base-content), 0 0 0 10px var(--color-focus);
12
+ box-shadow: 0 0 0 2px var(--color-white),
13
+ 0 0 0 6px var(--color-base-content), 0 0 0 10px var(--color-focus);
9
14
  }
10
15
  &:focus-within {
11
16
  @apply outline-none;
@@ -14,60 +19,77 @@
14
19
  @apply h-4 w-4 inline transition-all;
15
20
  }
16
21
  }
17
- .govgr-background-dark, .govgr-masthead {
22
+ .govgr-background-dark,
23
+ .govgr-masthead {
18
24
  .govgr-btn {
19
25
  @apply border-white hover:border-white border-2 shadow-none;
20
26
  }
21
- .govgr-btn-primary {
22
- @apply print:border-0 print:border-b-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
23
- }
24
- .govgr-btn-secondary {
25
- @apply print:border-0 print:border-b-2 print:border-gray300 print:text-base-content print:bg-white print:shadow-none;
26
- }
27
+ .govgr-btn-primary {
28
+ @apply print:border-0 print:border-b-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
29
+ }
30
+ .govgr-btn-secondary {
31
+ @apply print:border-0 print:border-b-2 print:border-gray300 print:text-base-content print:bg-white print:shadow-none;
32
+ }
27
33
 
28
- .govgr-btn-warning {
29
- @apply print:border-0 print:border-b-2 print:border-error print:text-base-content print:bg-white print:shadow-none;
30
- }
34
+ .govgr-btn-warning {
35
+ @apply print:border-0 print:border-b-2 print:border-error print:text-base-content print:bg-white print:shadow-none;
36
+ }
31
37
  }
32
38
  .govgr-btn-primary {
33
- -webkit-box-shadow: 0 2px 0 var(--color-base-content);
34
- box-shadow: 0 2px 0 var(--color-base-content);
35
- @apply
36
- bg-success text-white
37
- rounded-none
38
- hover:bg-success-hover active:bg-success-hover hover:text-white hover:no-underline
39
- print:border-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
39
+ -webkit-box-shadow: 0 2px 0 var(--color-base-content);
40
+ box-shadow: 0 2px 0 var(--color-base-content);
41
+ background-color: var(--btn-primary-background-color);
42
+ color: var(--btn-primary-color);
43
+ @apply hover:no-underline
44
+ print:border-2 print:border-success print:shadow-none;
45
+ &:hover {
46
+ background-color: var(--btn-primary-background-color-hover);
47
+ color: var(--btn-primary-color-hover);
40
48
  }
41
- .govgr-btn-cta {
42
- @apply text-xl py-4 print:pr-2;
49
+ &:active {
50
+ background-color: var(--btn-primary-background-color-active);
51
+ }
52
+ }
53
+ .govgr-btn.govgr-btn-cta {
54
+ @apply text-xl py-4 print:pr-2;
55
+ .govgr-arrow--right {
56
+ @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
57
+ }
58
+ &:hover {
43
59
  .govgr-arrow--right {
44
- @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
45
- }
46
- &:hover {
47
- .govgr-arrow--right {
48
- @apply ml-4 mr-0;
49
- }
60
+ @apply ml-4 mr-0;
50
61
  }
51
62
  }
52
- .govgr-btn-secondary {
53
- -webkit-box-shadow: 0 2px 0 var(--color-gray300);
54
- box-shadow: 0 2px 0 var(--color-gray300);
55
- @apply
56
- bg-gray100 text-base-content
57
- rounded-none
58
- hover:bg-gray200 active:bg-gray300 hover:no-underline
59
- print:border-2 print:border-gray300 print:text-base-content print:bg-white print:shadow-none;
63
+ }
64
+ .govgr-btn-secondary {
65
+ -webkit-box-shadow: 0 2px 0 var(--color-gray300);
66
+ box-shadow: 0 2px 0 var(--color-gray300);
67
+ @apply hover:no-underline
68
+ print:border-2 print:border-gray300 print:shadow-none;
69
+ background-color: var(--btn-secondary-background-color);
70
+ color: var(--btn-secondary-color);
71
+ &:hover {
72
+ background-color: var(--btn-secondary-background-color-hover);
73
+ color: var(--btn-secondary-color-hover);
60
74
  }
61
- .govgr-btn-warning {
62
- webkit-box-shadow: 0 2px 0 var(--color-base-content);
63
- box-shadow: 0 2px 0 var(--color-base-content);
64
- @apply
65
- bg-error text-white
66
- rounded-none
67
- hover:bg-error-hover active:bg-error-hover hover:text-white hover:no-underline
68
- print:border-2 print:border-error print:text-base-content print:bg-white print:shadow-none;
69
- &:active {
70
- --tw-bg-opacity: 1;
75
+ &:active {
76
+ background-color: var(--btn-secondary-background-color-active);
77
+ }
78
+ }
79
+ .govgr-btn-warning {
80
+ webkit-box-shadow: 0 2px 0 var(--color-base-content);
81
+ box-shadow: 0 2px 0 var(--color-base-content);
82
+ @apply hover:no-underline
83
+ print:border-2 print:border-error print:shadow-none;
84
+ background-color: var(--btn-warning-background-color);
85
+ color: var(--btn-warning-color);
86
+ &:hover {
87
+ background-color: var(--btn-warning-background-color-hover);
88
+ color: var(--btn-warning-color-hover);
89
+ }
90
+ &:active {
91
+ --tw-bg-opacity: 1;
92
+ background-color: var(--btn-warning-background-color-active);
71
93
  }
72
94
  }
73
95
  .govgr-btn-disabled {
@@ -78,6 +100,6 @@
78
100
  @apply block;
79
101
  }
80
102
  .govgr-caret--left {
81
- fill:var(--color-base-content);
103
+ fill: var(--color-base-content);
82
104
  @apply w-4 h-4 inline-block;
83
- }
105
+ }
package/src/components/dropdown.css CHANGED
@@ -88,7 +88,7 @@
88
88
  .govgr-dropdown__button {
89
89
  pointer-events: none;
90
90
  user-select: none;
91
- @apply bg-opacity-50 hover:bg-opacity-50;
91
+ opacity: 0.5;
92
92
  }
93
93
  }
94
94
  .govgr-header, .govgr-admin-header {
package/src/components/form.css CHANGED
@@ -35,7 +35,6 @@
35
35
  }
36
36
  }
37
37
  .govgr-fieldset__legend {
38
- @apply md:text-lg text-base font-bold mx-0 lg:mb-4;
39
38
  @apply mb-4 !important;
40
39
  }
41
40
  .govgr-label {
package/src/components/layout.css CHANGED
@@ -43,7 +43,7 @@
43
43
  }
44
44
  }
45
45
  .govgr-section-break {
46
- @apply m-auto px-4 py-2 border-0 w-full bg-white;
46
+ @apply m-auto px-4 py-2 border-0 w-full bg-transparent;
47
47
  }
48
48
  .govgr-section-break--visible {
49
49
  @apply border-t border-gray100 border-solid ;
package/src/components/nav.css CHANGED
@@ -155,14 +155,17 @@
155
155
  @apply flex flex-wrap;
156
156
  }
157
157
  .govgr-vertical-nav__item {
158
- @apply w-full p-2;
158
+ @apply w-full p-2 !important;
159
159
  }
160
160
  /* ---------- --- */
161
161
  .govgr-nav-list__menu{
162
162
  @apply flex sm:order-2 sm:left-0 sm:right-0 sm:relative sm:bg-white z-1 w-full;
163
- .govgr-main-wrapper {
163
+ &.govgr-main-wrapper {
164
164
  @apply xs:gap-y-2;
165
- }
165
+ };
166
+ }
167
+ .govgr-nav-list__menu-hidden {
168
+ @apply hidden;
166
169
  }
167
170
  .govgr-nav-list__content-list{
168
171
  @apply sm:grid-cols-2 sm:grid-rows-1 !important;
package/src/components/typography.css CHANGED
@@ -1,23 +1,57 @@
1
1
  .govgr-heading-xl {
2
- @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-12 mb-8 max-w-2xl;
2
+ @apply mx-0 max-w-2xl;
3
+ font-size: var(--heading-xl-font-size);
4
+ line-height:var(--heading-xl-line-height);
5
+ margin-bottom:var(--heading-xl-margin-bottom);
6
+ font-weight: var(--heading-xl-font-weight);
3
7
  }
4
8
  .govgr-heading-l {
5
- @apply md:text-4xl text-2xl font-bold mx-0 md:mb-10 mb-8;
9
+ @apply mx-0;
10
+ font-size: var(--heading-l-font-size);
11
+ line-height:var(--heading-l-line-height);
12
+ margin-bottom:var(--heading-l-margin-bottom);
13
+ font-weight: var(--heading-l-font-weight);
6
14
  }
7
15
  .govgr-heading-m {
8
- @apply md:text-2xl text-xl font-bold mx-0 md:mb-8 mb-6;
16
+ @apply mx-0;
17
+ font-size: var(--heading-m-font-size);
18
+ line-height:var(--heading-m-line-height);
19
+ margin-bottom:var(--heading-m-margin-bottom);
20
+ font-weight: var(--heading-m-font-weight);
9
21
  }
10
22
  .govgr-heading-s {
11
- @apply md:text-lg text-base font-bold mx-0 md:mb-5 mb-3;
12
- }
23
+ @apply mx-0 ;
24
+ font-size: var(--heading-s-font-size);
25
+ line-height:var(--heading-s-line-height);
26
+ margin-bottom:var(--heading-s-margin-bottom);
27
+ font-weight: var(--heading-s-font-weight);
28
+ }
13
29
  .govgr-caption-xl {
14
- @apply block md:text-2xl text-xl mx-0 lg:mb-2 mb-1 text-gray600 font-normal;
30
+ @apply block mx-0 font-normal;
31
+ color: var(--caption-xl-color);
32
+ font-size: var(--caption-xl-font-size);
33
+ line-height: var(--caption-xl-line-height);
34
+ margin-bottom: var(--caption-xl-margin-bottom);
35
+ font-weight: var(--caption-xl-font-weight);
36
+
15
37
  }
16
38
  .govgr-caption-l {
17
- @apply block md:text-xl text-lg mx-0 mb-0 text-gray600 font-normal;
39
+ @apply block mx-0 font-normal;
40
+ color: var(--caption-l-color);
41
+ font-size: var(--caption-l-font-size);
42
+ line-height: var(--caption-l-line-height);
43
+ margin-bottom: var(--caption-l-margin-bottom);
44
+ font-weight: var(--caption-l-font-weight);
45
+
18
46
  }
19
47
  .govgr-caption-m {
20
- @apply block md:text-lg text-base mx-0 mb-0 text-gray600 font-normal;
48
+ @apply block mx-0 font-normal;
49
+ color: var(--caption-m-color);
50
+ font-size: var(--caption-m-font-size);
51
+ line-height: var(--caption-m-line-height);
52
+ margin-bottom: var(--caption-m-margin-bottom);
53
+ font-weight: var(--caption-m-font-weight);
54
+
21
55
  }
22
56
  .govgr-\!-font-size-14 {
23
57
  @apply text-xs md:text-sm !important;
@@ -73,24 +107,35 @@
73
107
  .govgr-list--spaced>.govgr-list__item {
74
108
  @apply mb-4;
75
109
  }
76
- .govgr-body, .govgr-list, .govgr-blockquote {
77
- @apply md:mb-8 mb-4 text-base-content md:text-lg md:leading-normal text-base;
110
+ .govgr-list, .govgr-blockquote {
111
+ @apply md:mb-8 mb-4 text-base-content md:text-lg md:leading-normal text-base;
112
+ }
113
+ .govgr-body {
114
+ font-size: var(--body-font-size);
115
+ line-height: var(--body-line-height);
116
+ margin-bottom: var(--body-margin-bottom);
117
+ color: var(--body-color);
78
118
  }
79
119
  .govgr-body-l {
80
- @apply lg:text-2xl text-lg;
120
+ font-size: var(--body-l-font-size);
121
+ line-height: var(--body-l-line-height);
81
122
  }
82
123
  .govgr-body-s {
83
- @apply lg:text-base text-sm;
124
+ font-size: var(--body-s-font-size);
125
+ line-height: var(--body-s-line-height);
84
126
  }
85
127
  .govgr-hint-l {
86
128
  @apply mb-4 lg:text-2xl text-lg text-gray600;
87
129
  }
88
130
  .govgr-hint {
89
- @apply mb-4 md:text-lg text-base text-gray600;
131
+ font-size: var(--hint-font-size);
132
+ line-height: var(--hint-line-height);
133
+ margin-bottom: var(--hint-margin-bottom);
134
+ color: var(--hint-color);
90
135
  }
91
136
  .govgr-hint-s {
92
137
  @apply mb-4 lg:text-base text-sm text-gray600;
93
- }
138
+ }
94
139
  .govgr-background-dark, .govgr-masthead {
95
140
  .govgr-hint {
96
141
  @apply opacity-70 text-white print:text-base-content;
@@ -103,9 +148,12 @@
103
148
  @apply font-bold !important;
104
149
  }
105
150
  .govgr-link {
106
- @apply text-link hover:text-link-hover focus:text-link-active underline cursor-pointer;
151
+ @apply focus:text-link-active underline cursor-pointer;
152
+ color: var(--link-color);
153
+ padding: var(--link-padding);
107
154
  &:hover {
108
155
  text-decoration-thickness: 2px;
156
+ color: var(--link-color-hover);
109
157
  }
110
158
  &:focus {
111
159
  background-color: var(--color-focus);
@@ -127,7 +175,7 @@
127
175
  }
128
176
  .govgr-background-dark, .govgr-masthead {
129
177
  .govgr-link {
130
- @apply text-white hover:text-white focus:text-white print:text-base-content;
178
+ @apply text-white hover:text-white focus:text-base-content print:text-base-content;
131
179
  &:hover {
132
180
  text-decoration-thickness: 2px;
133
181
  }
package/themes.plugin.js CHANGED
@@ -1,8 +1,17 @@
1
- const fs = require('fs');
2
- const path = require('path');
3
- const postcss = require('postcss');
4
- const postcssrc = require('postcss-load-config');
5
- const postcssJs = require('postcss-js');
1
+ const fs = require("fs");
2
+ const path = require("path");
3
+ const postcss = require("postcss");
4
+ const postcssrc = require("postcss-load-config");
5
+ const postcssJs = require("postcss-js");
6
+
7
+ const prefix = "govgr";
8
+ const mediaQueriesMapping = {
9
+ xs: "",
10
+ sm: "@media (min-width: 640px)",
11
+ md: "@media (min-width: 768px)",
12
+ lg: "@media (min-width: 1024px)",
13
+ print: "@media print",
14
+ };
6
15
 
7
16
  function hexToRGB(hex) {
8
17
  var r = parseInt(hex.slice(1, 3), 16),
@@ -13,57 +22,127 @@ function hexToRGB(hex) {
13
22
  }
14
23
  let hasRun = false;
15
24
 
16
- function addThemes({ addBase, addComponents, theme,config }) {
17
- if(hasRun){
18
- return
25
+ function addThemes({ addBase, addComponents, theme, config }) {
26
+ if (hasRun) {
27
+ return;
19
28
  }
20
29
  hasRun = true;
21
30
  function extractColorVars(colorObj, colorGroup = "") {
22
- return Object.keys(colorObj).reduce(
23
- (vars, colorKey) => {
24
- const value = colorObj[colorKey];
31
+ return Object.keys(colorObj).reduce((vars, colorKey) => {
32
+ const value = colorObj[colorKey];
33
+
34
+ const newVars =
35
+ typeof value === "string"
36
+ ? {
37
+ [`--color${colorGroup}-${colorKey}`]: value,
38
+ [`--color${colorGroup}-${colorKey}-rgb`]: hexToRGB(value),
39
+ }
40
+ : extractColorVars(value, `-${colorKey}`);
41
+
42
+ return { ...vars, ...newVars };
43
+ }, {});
44
+ }
25
45
 
26
- const newVars =
27
- typeof value === "string"
28
- ? {
29
- [`--color${colorGroup}-${colorKey}`]: value,
30
- [`--color${colorGroup}-${colorKey}-rgb`]: hexToRGB(value),
46
+ function extractMediaQueriesFromComponentVars(componentObj, customTheme) {
47
+ let mediaObj = {};
48
+ Object.keys(componentObj).forEach((componentClass) => {
49
+ Object.keys(componentObj[componentClass]).forEach((componentAttr) => {
50
+ Object.keys(componentObj[componentClass][componentAttr]).forEach(
51
+ (componentMedia) => {
52
+ const newAttrKey = `--${componentClass}-${componentAttr}`;
53
+ const newAttrValue =
54
+ componentObj[componentClass][componentAttr][componentMedia];
55
+ const newAttr = { [newAttrKey]: newAttrValue };
56
+ const newClass = `.${prefix}-${componentClass}`;
57
+ const newMedia = mediaQueriesMapping[componentMedia];
58
+ const newTheme = customTheme === defaultTheme ? "" : `.${customTheme}`;
59
+
60
+ if (mediaObj[newMedia]) {
61
+ if (mediaObj[newMedia][newTheme][newClass]) {
62
+ mediaObj[newMedia][newTheme][newClass][newAttrKey] = newAttrValue;
63
+ } else {
64
+ mediaObj[newMedia][newTheme][newClass] = newAttr;
31
65
  }
32
- : extractColorVars(value, `-${colorKey}`);
66
+ } else {
67
+ mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr }};
68
+ }
69
+ }
70
+ );
71
+ });
72
+ });
73
+ return mediaObj;
74
+ }
33
75
 
34
- return { ...vars, ...newVars };
35
- },
36
- { }
37
- );
76
+ function extractGlobalVars(globalVarsObj) {
77
+ return Object.keys(globalVarsObj).reduce((vars, varKey) => {
78
+ const value = globalVarsObj[varKey];
79
+ vars[`--${varKey}`] = value;
80
+ return vars;
81
+ }, {});
38
82
  }
39
- const base = {}
83
+ function extractVars(themeObj) {
84
+ const colorVars = extractColorVars(themeObj.colors);
85
+ const globalVars =
86
+ themeObj.variables && themeObj.variables.globals
87
+ ? extractGlobalVars(themeObj.variables.globals)
88
+ : {};
89
+ return { ...colorVars, ...globalVars };
90
+ }
91
+
92
+ let base = {};
40
93
  const themes = config("themes");
41
- const defaultTheme = config('defaultTheme');
94
+ const defaultTheme = config("defaultTheme");
42
95
  for (const customTheme in themes) {
43
-
44
96
  const customThemeObject = require(themes[customTheme]);
45
97
  if (customThemeObject.overrides) {
46
- if(config('mode') === 'jit'){
47
- console.log('Loading theme css from source...')
48
- const css = fs.readFileSync(path.resolve(path.dirname(themes[customTheme]),'overrides/index.css')).toString();
49
- const ctx = { };
50
- const {plugins, options} = postcssrc.sync(ctx)
51
- const result = postcss(plugins)
52
- .process(css, options).root;
98
+ if (config("mode") === "jit") {
99
+ console.log("Loading theme css from source...");
100
+ const css = fs
101
+ .readFileSync(
102
+ path.resolve(
103
+ path.dirname(themes[customTheme]),
104
+ "overrides/index.css"
105
+ )
106
+ )
107
+ .toString();
108
+ const ctx = {};
109
+ const { plugins, options } = postcssrc.sync(ctx);
110
+ const result = postcss(plugins).process(css, options).root;
53
111
  const cssJs = postcssJs.objectify(result);
54
- base[`.${customTheme}`]= cssJs;
55
- }else{
112
+ base[`.${customTheme}`] = cssJs;
113
+ } else {
56
114
  customThemeObject.overrides.forEach((override) => {
57
- const cssJs = require(path.resolve(path.dirname(themes[customTheme]),override));
58
- base[`.${customTheme}`] = cssJs;
115
+ const cssJs = require(path.resolve(
116
+ path.dirname(themes[customTheme]),
117
+ override
118
+ ));
119
+ base[`.${customTheme}`] = cssJs;
59
120
  });
60
121
  }
61
122
  }
62
123
  if (customTheme === defaultTheme) {
63
- base[`:root,:root.${customTheme},::before,::after`] = extractColorVars(customThemeObject.colors);
124
+ base[`:root,:root.${customTheme},::before,::after`] =
125
+ extractVars(customThemeObject);
64
126
  } else {
65
- base[`:root.${customTheme},.${customTheme} *::before,.${customTheme} *::after`] = extractColorVars(customThemeObject.colors);
127
+ base[
128
+ `:root.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
129
+ ] = extractVars(customThemeObject);
66
130
  }
131
+
132
+ if (customThemeObject.variables && customThemeObject.variables.components) {
133
+ const extractedVariables = extractMediaQueriesFromComponentVars(
134
+ customThemeObject.variables.components,
135
+ customTheme
136
+ );
137
+ Object.keys(extractedVariables).forEach((key) => {
138
+ if (base[key]) {
139
+ base[key] = {...base[key], ...extractedVariables[key]}
140
+ } else {
141
+ base[key] = extractedVariables[key];
142
+ }
143
+ });
144
+ }
145
+
67
146
  }
68
147
  addBase(base);
69
148
  }