@digigov/css 0.34.1 → 0.36.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 (53) hide show
  1. package/defaultTheme/brandConfig.json +135 -0
  2. package/defaultTheme/button.json +3 -3
  3. package/defaultTheme/card.json +12 -0
  4. package/defaultTheme/index.js +12 -69
  5. package/defaultTheme/panel.json +43 -0
  6. package/defaultTheme/typography.json +4 -4
  7. package/dist/base/index.css +3 -3
  8. package/dist/base.js +1 -1
  9. package/dist/components.js +1 -1
  10. package/dist/digigov.css +4 -4
  11. package/package.json +4 -2
  12. package/src/base/index.css +1 -1
  13. package/src/components/accessibility-menu.css +6 -6
  14. package/src/components/accordion.css +2 -2
  15. package/src/components/admin-footer.css +1 -1
  16. package/src/components/admin-form.css +1 -1
  17. package/src/components/admin-header.css +1 -1
  18. package/src/components/autocomplete.css +7 -7
  19. package/src/components/bottom-info.css +1 -1
  20. package/src/components/button.css +5 -5
  21. package/src/components/card.css +6 -4
  22. package/src/components/checkboxes.css +2 -2
  23. package/src/components/cookie.css +1 -1
  24. package/src/components/details.css +1 -1
  25. package/src/components/drawer.css +17 -8
  26. package/src/components/dropdown.css +10 -7
  27. package/src/components/fillable.css +2 -2
  28. package/src/components/filter.css +6 -6
  29. package/src/components/footer.css +3 -3
  30. package/src/components/form.css +10 -5
  31. package/src/components/full-page-background.css +1 -1
  32. package/src/components/header.css +9 -9
  33. package/src/components/kitchensink.css +1 -4
  34. package/src/components/layout.css +1 -1
  35. package/src/components/misc.css +4 -4
  36. package/src/components/modal.css +3 -3
  37. package/src/components/nav.css +94 -88
  38. package/src/components/notification-banner.css +4 -4
  39. package/src/components/pagination.css +2 -2
  40. package/src/components/panel.css +10 -2
  41. package/src/components/phase-banner.css +4 -4
  42. package/src/components/radios.css +2 -2
  43. package/src/components/stepnav.css +4 -4
  44. package/src/components/summary-list.css +2 -2
  45. package/src/components/svg-icons.css +3 -3
  46. package/src/components/table.css +28 -9
  47. package/src/components/tabs.css +3 -3
  48. package/src/components/task-list.css +5 -5
  49. package/src/components/typography.css +6 -6
  50. package/src/pages/form.js +7 -7
  51. package/src/pages/index.js +7 -7
  52. package/tailwind.config.js +34 -31
  53. package/themes.plugin.js +26 -23
package/tailwind.config.js CHANGED
@@ -6,34 +6,36 @@ const allColors = [
6
6
  "transparent",
7
7
  "current",
8
8
  "primary",
9
- "primary-focus",
10
- "primary200",
11
- "secondary50",
12
- "secondary200",
9
+ "primary-100",
10
+ "primary-200",
11
+ "primary-300",
13
12
  "secondary",
14
- "secondary-focus",
15
- "secondary400",
16
- "secondary600",
17
- "secondary800",
18
- "content-dark",
19
- "content",
20
- "content-secondary",
13
+ "secondary-100",
14
+ "secondary-200",
15
+ "secondary-300",
16
+ "tertiary",
17
+ "tertiary-100",
18
+ "tertiary-200",
19
+ "tertiary-300",
21
20
  "accent",
22
21
  "accent-focus",
23
22
  "accent-content",
24
- "neutral",
25
- "neutral-focus",
26
- "neutral-content",
27
- "header-content",
28
- "base100",
29
- "base150",
30
- "base200",
31
- "base300",
32
- "base300-content",
23
+ "base-100",
24
+ "base-200",
25
+ "base-300",
26
+ "base-400",
27
+ "base-500",
28
+ "base-600",
29
+ "base-700",
30
+ "base-800",
31
+ "base-900",
32
+ "base-1000",
33
+ "base-11000",
33
34
  "base-content",
34
35
  "base-content-secondary",
35
36
  "base-content-invert",
36
37
  "info",
38
+ "info-hover",
37
39
  "success",
38
40
  "success-hover",
39
41
  "warning",
@@ -45,17 +47,18 @@ const allColors = [
45
47
  "link-visited",
46
48
  "link-active",
47
49
  "white",
48
- "gray50",
49
- "gray100",
50
- "gray200",
51
- "base-bg",
52
- "gray300",
53
- "gray400",
54
- "gray500",
55
- "gray600",
56
- "gray700",
57
- "gray800",
58
- "gray900",
50
+ "gray-100",
51
+ "gray-200",
52
+ "gray-300",
53
+ "gray-400",
54
+ "gray-500",
55
+ "gray-600",
56
+ "gray-700",
57
+ "gray-800",
58
+ "gray-900",
59
+ "gray-1000",
60
+ "gray-1100",
61
+ "gray-1200",
59
62
  "black",
60
63
  "shadow200",
61
64
  "shadow600",
package/themes.plugin.js CHANGED
@@ -28,19 +28,21 @@ function addThemes({ addBase, addComponents, theme, config }) {
28
28
  }
29
29
  hasRun = true;
30
30
  function extractColorVars(colorObj, colorGroup = "") {
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
- }, {});
31
+ return Object.keys(colorObj).reduce((vars, colorKey) => {
32
+ const value = colorObj[colorKey];
33
+ const colorName =
34
+ colorKey == "default"
35
+ ? `--color${colorGroup}`
36
+ : `--color${colorGroup}-${colorKey}`;
37
+ const newVars =
38
+ typeof value === "string"
39
+ ? {
40
+ [colorName]: value,
41
+ [`${colorName}-rgb`]: hexToRGB(value),
42
+ }
43
+ : extractColorVars(value, `-${colorKey}`);
44
+ return { ...vars, ...newVars };
45
+ }, {});
44
46
  }
45
47
 
46
48
  function extractMediaQueriesFromComponentVars(componentObj, customTheme) {
@@ -55,21 +57,23 @@ function addThemes({ addBase, addComponents, theme, config }) {
55
57
  const newAttr = { [newAttrKey]: newAttrValue };
56
58
  const newClass = `.${prefix}-${componentClass}`;
57
59
  const newMedia = mediaQueriesMapping[componentMedia];
58
- const newTheme = customTheme === defaultTheme ? "" : `.${customTheme}`;
59
-
60
+ const newTheme =
61
+ customTheme === defaultTheme ? "" : `.${customTheme}`;
62
+
60
63
  if (mediaObj[newMedia]) {
61
64
  if (mediaObj[newMedia][newTheme][newClass]) {
62
- mediaObj[newMedia][newTheme][newClass][newAttrKey] = newAttrValue;
65
+ mediaObj[newMedia][newTheme][newClass][newAttrKey] =
66
+ newAttrValue;
63
67
  } else {
64
68
  mediaObj[newMedia][newTheme][newClass] = newAttr;
65
69
  }
66
70
  } else {
67
- mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr }};
68
- }
71
+ mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr } };
72
+ }
69
73
  }
70
- );
71
- });
74
+ );
72
75
  });
76
+ });
73
77
  return mediaObj;
74
78
  }
75
79
 
@@ -136,13 +140,12 @@ function addThemes({ addBase, addComponents, theme, config }) {
136
140
  );
137
141
  Object.keys(extractedVariables).forEach((key) => {
138
142
  if (base[key]) {
139
- base[key] = {...base[key], ...extractedVariables[key]}
143
+ base[key] = { ...base[key], ...extractedVariables[key] };
140
144
  } else {
141
145
  base[key] = extractedVariables[key];
142
146
  }
143
- });
147
+ });
144
148
  }
145
-
146
149
  }
147
150
  addBase(base);
148
151
  }