@kausal/themes 0.6.5 → 0.7.0

package/dist/themes/default/theme.json

@@ -1 +1 @@
-{"name":"default","brandLight":"rgb(212, 235, 255)","brandDark":"rgb(16, 114, 81)","neutralLight":"rgb(225, 223, 218)","neutralDark":"rgb(92, 88, 83)","themeColors":{"light":"rgb(236, 234, 230)","dark":"rgb(70, 66, 62)","black":"rgb(26, 24, 23)","white":"rgb(247, 246, 243)"},"imageOverlay":"rgb(255, 255, 255)","fontFamily":"Inter","fontFamilyHeadings":"Inter","fontFamilyContent":"Inter","fontFamilyTiny":"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif","headingsFontWeight":700,"headingsColor":"rgb(26, 24, 23)","fontFamilyFallback":"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif","fontFamilyFallbackHeadings":"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif","fontSizeSm":"0.8rem","fontSizeBase":"1rem","fontSizeMd":"1.25rem","fontSizeLg":"1.5rem","fontSizeXl":"2rem","fontSizeXxl":"3rem","fontWeightNormal":400,"fontWeightBold":700,"fontWeightBase":400,"lineHeightBase":1.666,"lineHeightSm":1,"lineHeightMd":1.2,"lineHeightLg":1.75,"space":"0.8rem","spaces":{"s000":0,"s025":"0.2rem","s050":"0.4rem","s100":"0.8rem","s150":"1.2000000000000002rem","s200":"1.6rem","s300":"2.4000000000000004rem","s400":"3.2rem","s600":"4.800000000000001rem","s800":"6.4rem"},"linkColor":"rgb(16, 114, 81)","linkHoverColor":"rgb(12, 83, 59)","inputBtnFocusColor":"rgb(78, 128, 166)","inputBtnPaddingY":"0.5rem","inputBtnPaddingX":"0.75rem","btnBorderRadius":"0.25rem","btnBorderWidth":"1px","inputPaddingY":"0.5rem","inputPaddingX":"0.75rem","inputBg":"rgb(255, 255, 255)","inputBorderWidth":"1px","inputLineHeight":1.5,"inputBorderRadius":"4px","customSelectIndicator":"url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjg5NiAzTDcgNy44NDIgMi4xMDQgMyAwIDUuMDggNyAxMmw3LTYuOTJMMTEuODk2IDN6IiBmaWxsPSIjMDAwIi8+PC9zdmc+\")","formLabelFontWeight":400,"brandNavColor":"rgb(247, 246, 243)","brandNavBackground":"rgb(92, 88, 83)","navLogoVisible":true,"navTitleVisible":true,"footerLogoPlacement":"left","footerLogoSize":"1","footerBackgroundColor":"rgb(92, 88, 83)","footerColor":"rgb(247, 246, 243)","cardBorderWidth":"1px","cardBorderRadius":"0.5rem","badgeBorderRadius":"3px","badgePaddingY":"0.5em","badgePaddingX":"0.75em","badgeFontWeight":700,"tableHeadBg":"rgba(0, 0, 0, 0)","tableHoverBg":"rgb(247, 246, 243)","actionCompletedColor":"rgb(12, 75, 43)","actionOnTimeColor":"rgb(12, 75, 43)","actionColor":"rgb(20, 80, 112)","breakpointSm":"576px","breakpointMd":"768px","breakpointLg":"992px","breakpointXl":"1200px","iconsUrl":"/static/themes/default/icons","combinedIconsFilename":"combined-icon-symbols","themeLogoUrl":"/static/themes/default/images/default-logo-white.svg","themeLogoWhiteUrl":"/static/themes/default/images/default-logo-white.svg","iconIndicatorsUrl":"","iconActionsUrl":"","themeCustomStylesUrl":"","graphColors":{"grey000":"rgb(248, 248, 248)","grey005":"rgb(243, 243, 243)","grey010":"rgb(238, 238, 238)","grey020":"rgb(217, 217, 217)","grey030":"rgb(199, 199, 199)","grey040":"rgb(183, 183, 183)","grey050":"rgb(160, 160, 160)","grey060":"rgb(123, 123, 123)","grey070":"rgb(99, 99, 99)","grey080":"rgb(75, 75, 75)","grey090":"rgb(63, 63, 63)","grey100":"rgb(29, 29, 29)","green010":"rgb(167, 235, 192)","green030":"rgb(86, 195, 142)","green050":"rgb(39, 154, 109)","green070":"rgb(16, 114, 81)","green090":"rgb(7, 74, 53)","red010":"rgb(252, 216, 216)","red030":"rgb(239, 154, 154)","red050":"rgb(212, 98, 98)","red070":"rgb(167, 57, 57)","red090":"rgb(102, 29, 29)","blue010":"rgb(194, 217, 237)","blue030":"rgb(109, 151, 184)","blue050":"rgb(78, 128, 166)","blue070":"rgb(32, 93, 130)","blue090":"rgb(13, 68, 94)","yellow010":"rgb(251, 230, 174)","yellow030":"rgb(220, 157, 42)","yellow050":"rgb(200, 130, 23)","yellow070":"rgb(143, 70, 4)","yellow090":"rgb(60, 19, 0)"},"settings":{"dashboard":{"showResponsibles":true,"showIndicators":true},"homeLink":"text","categories":{"filterIndicatorsByAllLevels":true},"fundingInstruments":[],"otherLogos":[]}}
+{"name":"default","brandLight":"rgb(212, 235, 255)","brandDark":"rgb(16, 114, 81)","neutralLight":"rgb(225, 223, 218)","neutralDark":"rgb(92, 88, 83)","themeColors":{"light":"rgb(236, 234, 230)","dark":"rgb(70, 66, 62)","black":"rgb(26, 24, 23)","white":"rgb(247, 246, 243)"},"textColor":{"primary":"rgb(29, 29, 29)","secondary":"rgb(75, 75, 75)","tertiary":"rgb(160, 160, 160)"},"cardBackground":{"primary":"rgb(248, 248, 248)","secondary":"rgb(243, 243, 243)"},"imageOverlay":"rgb(255, 255, 255)","fontFamily":"Inter","fontFamilyHeadings":"Inter","fontFamilyContent":"Inter","fontFamilyTiny":"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif","headingsFontWeight":700,"headingsColor":"rgb(26, 24, 23)","fontFamilyFallback":"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif","fontFamilyFallbackHeadings":"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif","fontSizeSm":"0.8rem","fontSizeBase":"1rem","fontSizeMd":"1.25rem","fontSizeLg":"1.5rem","fontSizeXl":"2rem","fontSizeXxl":"3rem","fontWeightNormal":400,"fontWeightBold":700,"fontWeightBase":400,"lineHeightBase":1.666,"lineHeightSm":1,"lineHeightMd":1.2,"lineHeightLg":1.75,"space":"0.8rem","spaces":{"s000":0,"s025":"0.2rem","s050":"0.4rem","s100":"0.8rem","s150":"1.2000000000000002rem","s200":"1.6rem","s300":"2.4000000000000004rem","s400":"3.2rem","s600":"4.800000000000001rem","s800":"6.4rem"},"linkColor":"rgb(16, 114, 81)","linkHoverColor":"rgb(12, 83, 59)","inputBtnFocusColor":"rgb(78, 128, 166)","inputBtnPaddingY":"0.5rem","inputBtnPaddingX":"0.75rem","btnBorderRadius":"0.25rem","btnBorderWidth":"1px","inputPaddingY":"0.5rem","inputPaddingX":"0.75rem","inputBg":"rgb(255, 255, 255)","inputBorderWidth":"1px","inputLineHeight":1.5,"inputBorderRadius":"4px","customSelectIndicator":"url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjg5NiAzTDcgNy44NDIgMi4xMDQgMyAwIDUuMDggNyAxMmw3LTYuOTJMMTEuODk2IDN6IiBmaWxsPSIjMDAwIi8+PC9zdmc+\")","formLabelFontWeight":400,"brandNavColor":"rgb(247, 246, 243)","brandNavBackground":"rgb(92, 88, 83)","navLogoVisible":true,"navTitleVisible":true,"footerLogoPlacement":"left","footerLogoSize":"1","footerBackgroundColor":"rgb(92, 88, 83)","footerColor":"rgb(247, 246, 243)","cardBorderWidth":"1px","cardBorderRadius":"0.5rem","badgeBorderRadius":"3px","badgePaddingY":"0.5em","badgePaddingX":"0.75em","badgeFontWeight":700,"tableHeadBg":"rgba(0, 0, 0, 0)","tableHoverBg":"rgb(247, 246, 243)","actionCompletedColor":"rgb(12, 75, 43)","actionOnTimeColor":"rgb(12, 75, 43)","actionColor":"rgb(20, 80, 112)","breakpointSm":"576px","breakpointMd":"768px","breakpointLg":"992px","breakpointXl":"1200px","iconsUrl":"/static/themes/default/icons","combinedIconsFilename":"combined-icon-symbols","themeLogoUrl":"/static/themes/default/images/default-logo-white.svg","themeLogoWhiteUrl":"/static/themes/default/images/default-logo-white.svg","iconIndicatorsUrl":"","iconActionsUrl":"","themeCustomStylesUrl":"","graphColors":{"grey000":"rgb(248, 248, 248)","grey005":"rgb(243, 243, 243)","grey010":"rgb(238, 238, 238)","grey020":"rgb(217, 217, 217)","grey030":"rgb(199, 199, 199)","grey040":"rgb(183, 183, 183)","grey050":"rgb(160, 160, 160)","grey060":"rgb(123, 123, 123)","grey070":"rgb(99, 99, 99)","grey080":"rgb(75, 75, 75)","grey090":"rgb(63, 63, 63)","grey100":"rgb(29, 29, 29)","green010":"rgb(167, 235, 192)","green030":"rgb(86, 195, 142)","green050":"rgb(39, 154, 109)","green070":"rgb(16, 114, 81)","green090":"rgb(7, 74, 53)","red010":"rgb(252, 216, 216)","red030":"rgb(239, 154, 154)","red050":"rgb(212, 98, 98)","red070":"rgb(167, 57, 57)","red090":"rgb(102, 29, 29)","blue010":"rgb(194, 217, 237)","blue030":"rgb(109, 151, 184)","blue050":"rgb(78, 128, 166)","blue070":"rgb(32, 93, 130)","blue090":"rgb(13, 68, 94)","yellow010":"rgb(251, 230, 174)","yellow030":"rgb(220, 157, 42)","yellow050":"rgb(200, 130, 23)","yellow070":"rgb(143, 70, 4)","yellow090":"rgb(60, 19, 0)"},"settings":{"dashboard":{"showResponsibles":true,"showIndicators":true},"homeLink":"text","categories":{"filterIndicatorsByAllLevels":true},"fundingInstruments":[],"otherLogos":[]}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kausal/themes",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "Themes for Kausal products",
   "type": "module",
   "main": "setup.cjs",

package/props.js

@@ -1,4 +1,4 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
 const { number, exact, string, oneOfType, bool, array, object, arrayOf } =
   PropTypes;
@@ -19,87 +19,87 @@ export function makeThemePropType(cssv = null) {
     };
   }
   const props = {
-    actionColor: cssv("color").isRequired,
-    actionCompletedColor: cssv("color").isRequired,
-    actionOnTimeColor: cssv("color").isRequired,
+    actionColor: cssv('color').isRequired,
+    actionCompletedColor: cssv('color').isRequired,
+    actionOnTimeColor: cssv('color').isRequired,
     badgeBorderRadius: oneOfType([string, number]).isRequired,
     badgeFontWeight: number.isRequired,
     badgePaddingX: string.isRequired,
     badgePaddingY: string.isRequired,
     brandDark: string.isRequired,
     brandLight: string.isRequired,
-    brandNavBackground: cssv("color"),
-    brandNavColor: cssv("color"),
+    brandNavBackground: cssv('color'),
+    brandNavColor: cssv('color'),
     breakpointLg: string.isRequired,
     breakpointMd: string.isRequired,
     breakpointSm: string.isRequired,
     breakpointXl: string.isRequired,
-    btnBorderRadius: cssv("border-radius"),
-    btnBorderWidth: cssv("border-width"),
-    cardBorderRadius: cssv("border-radius"),
-    cardBorderWidth: cssv("border-width"),
+    btnBorderRadius: cssv('border-radius'),
+    btnBorderWidth: cssv('border-width'),
+    cardBorderRadius: cssv('border-radius'),
+    cardBorderWidth: cssv('border-width'),
     combinedIconsFilename: string.isRequired,
     customSelectIndicator: string.isRequired,
-    fontFamily: cssv("font-family").allowEmpty,
-    fontFamilyContent: cssv("font-family").allowEmpty,
-    fontFamilyTiny: cssv("font-family").allowEmpty,
-    fontFamilyHeadings: cssv("font-family").allowEmpty,
-    fontFamilyFallback: cssv("font-family").allowEmpty,
-    fontFamilyFallbackHeadings: cssv("font-family").allowEmpty,
-    fontSizeBase: cssv("font-size").isRequired,
-    fontSizeLg: cssv("font-size").isRequired,
-    fontSizeMd: cssv("font-size").isRequired,
-    fontSizeSm: cssv("font-size").isRequired,
-    fontSizeXl: cssv("font-size").isRequired,
-    fontSizeXxl: cssv("font-size").isRequired,
-    fontWeightBase: cssv("font-weight").isRequired,
-    fontWeightBold: cssv("font-weight").isRequired,
-    fontWeightNormal: cssv("font-weight").isRequired,
+    fontFamily: cssv('font-family').allowEmpty,
+    fontFamilyContent: cssv('font-family').allowEmpty,
+    fontFamilyTiny: cssv('font-family').allowEmpty,
+    fontFamilyHeadings: cssv('font-family').allowEmpty,
+    fontFamilyFallback: cssv('font-family').allowEmpty,
+    fontFamilyFallbackHeadings: cssv('font-family').allowEmpty,
+    fontSizeBase: cssv('font-size').isRequired,
+    fontSizeLg: cssv('font-size').isRequired,
+    fontSizeMd: cssv('font-size').isRequired,
+    fontSizeSm: cssv('font-size').isRequired,
+    fontSizeXl: cssv('font-size').isRequired,
+    fontSizeXxl: cssv('font-size').isRequired,
+    fontWeightBase: cssv('font-weight').isRequired,
+    fontWeightBold: cssv('font-weight').isRequired,
+    fontWeightNormal: cssv('font-weight').isRequired,
     navLogoVisible: bool.isRequired,
     navTitleVisible: bool.isRequired,
     navLinkIcons: bool,
     footerLogoPlacement: string.isRequired,
     footerLogoSize: string,
     footerLogoLink: string,
-    footerBackgroundColor: cssv("color"),
-    footerColor: cssv("color"),
+    footerBackgroundColor: cssv('color'),
+    footerColor: cssv('color'),
     formLabelFontWeight: number.isRequired,
     graphColors: exact({
-      grey000: cssv("color"),
-      grey005: cssv("color"),
-      grey010: cssv("color"),
-      grey020: cssv("color"),
-      grey030: cssv("color"),
-      grey040: cssv("color"),
-      grey050: cssv("color"),
-      grey060: cssv("color"),
-      grey070: cssv("color"),
-      grey080: cssv("color"),
-      grey090: cssv("color"),
-      grey100: cssv("color"),
-      green010: cssv("color"),
-      green030: cssv("color"),
-      green050: cssv("color"),
-      green070: cssv("color"),
-      green090: cssv("color"),
-      red010: cssv("color"),
-      red030: cssv("color"),
-      red050: cssv("color"),
-      red070: cssv("color"),
-      red090: cssv("color"),
-      blue010: cssv("color"),
-      blue030: cssv("color"),
-      blue050: cssv("color"),
-      blue070: cssv("color"),
-      blue090: cssv("color"),
-      yellow010: cssv("color"),
-      yellow030: cssv("color"),
-      yellow050: cssv("color"),
-      yellow070: cssv("color"),
-      yellow090: cssv("color"),
+      grey000: cssv('color'),
+      grey005: cssv('color'),
+      grey010: cssv('color'),
+      grey020: cssv('color'),
+      grey030: cssv('color'),
+      grey040: cssv('color'),
+      grey050: cssv('color'),
+      grey060: cssv('color'),
+      grey070: cssv('color'),
+      grey080: cssv('color'),
+      grey090: cssv('color'),
+      grey100: cssv('color'),
+      green010: cssv('color'),
+      green030: cssv('color'),
+      green050: cssv('color'),
+      green070: cssv('color'),
+      green090: cssv('color'),
+      red010: cssv('color'),
+      red030: cssv('color'),
+      red050: cssv('color'),
+      red070: cssv('color'),
+      red090: cssv('color'),
+      blue010: cssv('color'),
+      blue030: cssv('color'),
+      blue050: cssv('color'),
+      blue070: cssv('color'),
+      blue090: cssv('color'),
+      yellow010: cssv('color'),
+      yellow030: cssv('color'),
+      yellow050: cssv('color'),
+      yellow070: cssv('color'),
+      yellow090: cssv('color'),
     }).isRequired,
-    headingsColor: cssv("color"),
-    headingsFontWeight: cssv("font-weight").isRequired,
+    headingsColor: cssv('color'),
+    headingsFontWeight: cssv('font-weight').isRequired,
     iconActionsUrl: string.isRequired,
     iconIndicatorsUrl: string.isRequired,
     iconsUrl: string.isRequired,
@@ -146,6 +146,15 @@ export function makeThemePropType(cssv = null) {
     themeCustomStylesUrl: string.isRequired,
     themeLogoUrl: string.isRequired,
     themeLogoWhiteUrl: string.isRequired,
+    textColor: exact({
+      primary: cssv('color').isRequired,
+      secondary: cssv('color').isRequired,
+      tertiary: cssv('color').isRequired,
+    }),
+    cardBackground: exact({
+      primary: cssv('color').isRequired,
+      secondary: cssv('color').isRequired,
+    }),
     settings: exact({
       dashboard: exact({
         showResponsibles: bool.isRequired,

package/types.ts

@@ -1,6 +1,6 @@
-import type { StandardProperties as css } from "csstype";
+import type { StandardProperties as css } from 'csstype';
 
-type cssColor = NonNullable<css["color"]>;
+type cssColor = NonNullable<css['color']>;
 
 export interface Theme {
   actionColor: string;
@@ -18,10 +18,10 @@ export interface Theme {
   breakpointMd: string;
   breakpointSm: string;
   breakpointXl: string;
-  btnBorderRadius: css["borderRadius"];
-  btnBorderWidth: css["borderWidth"];
-  cardBorderRadius: css["borderRadius"];
-  cardBorderWidth: css["borderWidth"];
+  btnBorderRadius: css['borderRadius'];
+  btnBorderWidth: css['borderWidth'];
+  cardBorderRadius: css['borderRadius'];
+  cardBorderWidth: css['borderWidth'];
   combinedIconsFilename: string;
   customSelectIndicator: string;
   fontFamily: string;
@@ -83,7 +83,7 @@ export interface Theme {
     yellow090: cssColor;
   };
   headingsColor: cssColor;
-  headingsFontWeight: css["fontWeight"];
+  headingsFontWeight: css['fontWeight'];
   iconActionsUrl: string;
   iconIndicatorsUrl: string;
   iconsUrl: string;
@@ -130,6 +130,15 @@ export interface Theme {
   themeCustomStylesUrl: string;
   themeLogoUrl: string;
   themeLogoWhiteUrl: string;
+  textColor: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+  };
+  cardBackground: {
+    primary: string;
+    secondary: string;
+  };
   settings: {
     dashboard: {
       showResponsibles: boolean;