@digigov/css 0.5.0 → 0.7.0

package/CHANGELOG.json

@@ -1,6 +1,79 @@
 {
   "name": "@digigov/css",
   "entries": [
+    {
+      "version": "0.7.0",
+      "tag": "@digigov/css_v0.7.0",
+      "date": "Tue, 01 Feb 2022 15:38:26 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "update color variables, remove tailwind color palette, remove static colors at focus and update focus styling at buttons"
+          },
+          {
+            "comment": "implement Hidden component"
+          }
+        ],
+        "none": [
+          {
+            "comment": "fix bug in header container max-width overflowing the correct width"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.6.2",
+      "tag": "@digigov/css_v0.6.2",
+      "date": "Mon, 31 Jan 2022 13:42:21 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Fix postcss.config"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.6.1",
+      "tag": "@digigov/css_v0.6.1",
+      "date": "Thu, 20 Jan 2022 10:45:21 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Minor indentation fix"
+          },
+          {
+            "comment": "change class name form govgr-form-group to govgr-field "
+          },
+          {
+            "comment": "Add rules to govgr-footer class in order to render the blue border on the footer's top"
+          },
+          {
+            "comment": "Add the entire src directory to the NPM dist package"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.6.0",
+      "tag": "@digigov/css_v0.6.0",
+      "date": "Mon, 17 Jan 2022 14:50:34 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Add new feature in Card component and fix spacing"
+          },
+          {
+            "comment": "Remove underline text in HeaderTitle, fix Button styles after changing `CallToAction` arrow icon to SVG, remove `.govgr-width-container` from footer.css. Finally, add classes for full-width layout support"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "refactor width container and full width container to fix mobile view on guide"
+          }
+        ]
+      }
+    },
     {
       "version": "0.5.0",
       "tag": "@digigov/css_v0.5.0",

package/CHANGELOG.md

@@ -1,6 +1,43 @@
 # Change Log - @digigov/css
 
-This log was last generated on Thu, 30 Dec 2021 12:54:03 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Feb 2022 15:38:26 GMT and should not be manually modified.
+
+## 0.7.0
+Tue, 01 Feb 2022 15:38:26 GMT
+
+### Minor changes
+
+- update color variables, remove tailwind color palette, remove static colors at focus and update focus styling at buttons
+- implement Hidden component
+
+## 0.6.2
+Mon, 31 Jan 2022 13:42:21 GMT
+
+### Patches
+
+- Fix postcss.config
+
+## 0.6.1
+Thu, 20 Jan 2022 10:45:21 GMT
+
+### Patches
+
+- Minor indentation fix
+- change class name form govgr-form-group to govgr-field 
+- Add rules to govgr-footer class in order to render the blue border on the footer's top
+- Add the entire src directory to the NPM dist package
+
+## 0.6.0
+Mon, 17 Jan 2022 14:50:34 GMT
+
+### Minor changes
+
+- Add new feature in Card component and fix spacing
+- Remove underline text in HeaderTitle, fix Button styles after changing `CallToAction` arrow icon to SVG, remove `.govgr-width-container` from footer.css. Finally, add classes for full-width layout support
+
+### Patches
+
+- refactor width container and full width container to fix mobile view on guide
 
 ## 0.5.0
 Thu, 30 Dec 2021 12:54:03 GMT

package/colors/color-values.js

@@ -1,92 +1,62 @@
-const blue_100 = {name: "s", value: "194 100% 65%"};
-const blue_200 = {name: "s", value: "196 100% 47%"}; // secondary
-const blue_300 = {name: "sf", value: "204 100% 42%"};
-const blue_400 = {name: "s3", value: "206 100% 35%"};
-const blue_500 = {name: "s4", value: "212 100% 29%"};
-const blue_800 = {name: "p", value: "214 100% 23% "}; // primary
-const blue_900 = {name: "p", value: "216 100% 16% "};
-
-const green         =   {name: "su", value: "152 100% 22%"};
-const green_darker  =   {name: "suh", value: "152 100% 14%"};
-const orange        =   {name: "wa", value: "36 100% 50%"};
-const red           =   {name: "er", value: "0 63% 49%"};
-const red_darker    =   {name: "er", value: "0 66% 39%"};
-const purple        =   {name: "lv", value: "259 54% 37%"};
-const white         =   {name: "pc", value: "0 0% 100%"};
-const yellow         =   {name: "pc", value: "52 100% 50%"};
-
-const gray_50    = {name: "g05", value: "0 0% 80%"};
-const gray_100   = {name: "g10", value: "0 0% 92%"};
-const gray_200   = {name: "g20", value: "300 1% 70%"};
-const gray_300   =  {name: "g30", value: "279 1% 60%"};
-const gray_400   = {name: "g40", value: "269 2% 51%"};
-const gray_500   = {name: "g50", value: "254 3% 43%"};
-const gray_600   = {name: "g60", value: "240 4% 35%"};
-const gray_700   = {name: "g70", value: "227 6% 28%"};
-const gray_800   = {name: "g80", value: "221 12% 22%"};
-const gray_900   = {name: "g90", value: "208 18% 16%"};
-
 module.exports = {
 
-  "primary"           : blue_800,
-  "primary-focus"     : blue_500,
-  "primary-200"       : blue_900,
-
-  "secondary-50"      : blue_100,
-  "secondary-200"     : blue_200,
-  "secondary"         : blue_200,
-  "secondary-focus"   : blue_300,
-  "secondary-400"     : blue_300,
-  "secondary-600"     : blue_400,
-  "secondary-800"     : blue_500,
-
-  "content-dark"      : white,
-  "content"           : gray_900, 
-  "content-secondary" : gray_600,
-
-  "accent"            : {name: "a", value: "174 60% 51%"},  
-  "accent-focus"      : {name: "af", value: "174 60% 41%"},
-  "accent-content"    : white,
-
-  "neutral"           : gray_700,
-  "neutral-focus"     : gray_800,
-  "neutral-content"   : white,
-
-  "base-100"          : gray_100,
-  "base-150"          : gray_200,
-  "base-200"          : gray_300,
-  "base-300"          : gray_600,
-  "base-300-content"  : white,
-
-  "base-content"      : gray_900,
-  "base-content-secondary"  : gray_600,
-  "base-content-invert"  : white,
-
-  "info"              : blue_200,
-  "success"           : green,
-  "success-hover"     : green_darker,
-  "warning"           : orange,
-  "error"             : red,
-  "error-hover"       : red_darker,
-
-  "focus"             : yellow,
-
-  "link"             : blue_300,
-  "link-hover"       : blue_800,
-  "link-visited"     : purple,
-  "link-active"      : blue_900,
-
-  "gray-50"     : gray_50,
-  "gray-100"    : gray_100,
-  "gray-200"    : gray_200,
-  "base-bg"     : gray_200,
-  "gray-300"    : gray_300,
-  "gray-400"    : gray_400,
-  "gray-500"    : gray_500,
-  "gray-600"    : gray_600,
-  "gray-700"    : gray_700,
-  "gray-800"    : gray_800,
-  "gray-900"    : gray_900,
+  "primary":"#003375",
+  "primary-focus":"#004594",
+  "primary-200":"#002152",
+
+  "secondary-50":"#4dd5ff",
+  "secondary-200":"#00b0f0",
+  "secondary":"#00b0f0",
+  "secondary-focus":"#0081d6",
+  "secondary-400":"#0081d6",
+  "secondary-600":"#0065b3",
+  "secondary-800":"#004594",
+
+  "content-dark":"#fff",
+  "content":"#212930",
+  "content-secondary":"#56565d",
+
+  "accent":"#37cdbe",
+  "accent-focus":"#2aa79b",
+  "accent-content":"#fff",
+  "neutral":"#43454c",
+  "neutral-focus":"#31363f",
+  "neutral-content":"#fff",
+
+  "base-100":"#ebebeb",
+  "base-150":"#b3b2b3",
+  "base-200":"#99989a",
+  "base-300":"#56565d",
+  "base-300-content":"#fff",
+  "base-content":"#212930",
+  "base-content-secondary":"#56565d",
+  "base-content-invert":"#fff",
+
+  "info":"#00b0f0",
+  "success":"#00703c", 
+  "success-hover":"#004726",
+  "warning":"#f90",
+  "error":"#cc2e2e",
+  "error-hover":"#a52222",
+  "focus":"#fd0",
+  "link":"#0081d6",
+  "link-hover":"#003375",
+  "link-visited":"#4c2b91",
+  "link-active":"#002152",
+
+  "white":"#fff",
+  "gray-50":"#ccc",
+  "gray-100":"#ebebeb",
+  "gray-200":"#b3b2b3",
+  "base-bg":"#b3b2b3",
+  "gray-300":"#99989a",
+  "gray-400":"#828085",
+  "gray-500":"#6c6a71",
+  "gray-600":"#56565d",
+  "gray-700":"#43454c",
+  "gray-800":"#31363f",
+  "gray-900":"#212930",
+  "black":"#000",
 
 }
 

package/colors/index.js

@@ -1,21 +1,10 @@
-const colors = require('tailwindcss/colors');
-const colorValues = require('./color-values')
-
+const colorValues = require('./color-values');
 let colorObject = {
   "transparent": "transparent",
   "current": "currentColor",
 }
 
-for (const [key, item] of Object.entries(colorValues)) {
-  colorObject[key] = ({ opacityVariable, opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `hsla(var(--`+ item['name'] +`, `+ item['value'] +`) / ${opacityValue})`
-    }
-    if (opacityVariable !== undefined) {
-      return `hsla(var(--`+ item['name'] +`, `+ item['value'] +`) / var(${opacityVariable}, 1))`
-    }
-    return `hsl(var(--`+ item['name'] +`, `+ item['value']+ `))`
-  }
+for (const [key, value] of Object.entries(colorValues)) {
+  colorObject[key] = value.startsWith('#')?value:value.startsWith('rgb')?value:`hsl(${value})`
 }
-
-module.exports = {...colors, ...colorObject};
+module.exports = {...colorObject};

package/dist/base/index.css

@@ -1,7 +1,9 @@
 /*!
- * @digigov/css: 0.5.0
+ * @digigov/css: 0.7.0
  * 
  * Author: grnet-devs
- * Date: 2021-12-30
+ * Date: 2022-2-1
  */
-html{-webkit-tap-highlight-color:transparent}body{font-family:Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--tw-text-opacity:1;color:hsla(var(--g90,208 18% 16%)/var(--tw-text-opacity))}
+/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com*/
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a1a1aa}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a1a1aa}input::placeholder,textarea::placeholder{opacity:1;color:#a1a1aa}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:after,:before{border-color:currentColor}html{-webkit-tap-highlight-color:transparent}body{font-family:Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--tw-text-opacity:1;color:rgba(33,41,48,var(--tw-text-opacity))}

package/dist/base.css

@@ -1,7 +1,9 @@
 /*!
- * @digigov/css: 0.5.0
+ * @digigov/css: 0.7.0
  * 
  * Author: grnet-devs
- * Date: 2021-12-30
+ * Date: 2022-2-1
  */
-html{-webkit-tap-highlight-color:transparent}body{font-family:Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--tw-text-opacity:1;color:hsla(var(--g90,208 18% 16%)/var(--tw-text-opacity))}
+/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com*/
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a1a1aa}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a1a1aa}input::placeholder,textarea::placeholder{opacity:1;color:#a1a1aa}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:after,:before{border-color:currentColor}html{-webkit-tap-highlight-color:transparent}body{font-family:Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--tw-text-opacity:1;color:rgba(33,41,48,var(--tw-text-opacity))}

package/dist/base.js

@@ -1 +1 @@
-module.exports = {"html":{"WebkitTapHighlightColor":"transparent"},"body":{"fontFamily":"Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji","-TwTextOpacity":"1","color":"hsla(var(--g90,208 18% 16%)/var(--tw-text-opacity))"}};
+module.exports = {"html":{"MozTabSize":"4","OTabSize":"4","tabSize":"4","lineHeight":["1.15","1.5"],"WebkitTextSizeAdjust":"100%","fontFamily":"Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji","WebkitTapHighlightColor":"transparent"},"body":{"margin":"0","fontFamily":["system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji","inherit","Roboto,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"],"lineHeight":"inherit","-TwTextOpacity":"1","color":"rgba(33,41,48,var(--tw-text-opacity))"},"hr":{"height":"0","color":"inherit","borderTopWidth":"1px"},"abbr[title]":{"WebkitTextDecoration":"underline dotted","textDecoration":"underline dotted"},"b,strong":{"fontWeight":"bolder"},"code,kbd,pre,samp":{"fontFamily":["ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace","ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace"],"fontSize":"1em"},"small":{"fontSize":"80%"},"sub,sup":{"fontSize":"75%","lineHeight":"0","position":"relative","verticalAlign":"baseline"},"sub":{"bottom":"-.25em"},"sup":{"top":"-.5em"},"table":{"textIndent":"0","borderColor":"inherit","borderCollapse":"collapse"},"button,input,optgroup,select,textarea":{"fontFamily":"inherit","fontSize":"100%","lineHeight":["1.15","inherit"],"margin":"0","padding":"0","color":"inherit"},"button,select":{"textTransform":"none"},"[type=button],[type=reset],[type=submit],button":{"WebkitAppearance":"button"},"::-moz-focus-inner":{"borderStyle":"none","padding":"0"},":-moz-focusring":{"outline":"1px dotted ButtonText"},":-moz-ui-invalid":{"boxShadow":"none"},"legend":{"padding":"0"},"progress":{"verticalAlign":"baseline"},"::-webkit-inner-spin-button,::-webkit-outer-spin-button":{"height":"auto"},"[type=search]":{"WebkitAppearance":"textfield","outlineOffset":"-2px"},"::-webkit-search-decoration":{"WebkitAppearance":"none"},"::-webkit-file-upload-button":{"WebkitAppearance":"button","font":"inherit"},"summary":{"display":"list-item"},"blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre":{"margin":"0"},"button":{"backgroundColor":"transparent","backgroundImage":"none"},"fieldset":{"margin":"0","padding":"0"},"ol,ul":{"listStyle":"none","margin":"0","padding":"0"},"*,:after,:before":{"boxSizing":"border-box","border":"0 solid","borderColor":"currentColor"},"img":{"borderStyle":"solid"},"textarea":{"resize":"vertical"},"input::-moz-placeholder,textarea::-moz-placeholder":{"opacity":"1","color":"#a1a1aa"},"input:-ms-input-placeholder,textarea:-ms-input-placeholder":{"opacity":"1","color":"#a1a1aa"},"input::placeholder,textarea::placeholder":{"opacity":"1","color":"#a1a1aa"},"[role=button],button":{"cursor":"pointer"},"h1,h2,h3,h4,h5,h6":{"fontSize":"inherit","fontWeight":"inherit"},"a":{"color":"inherit","textDecoration":"inherit"},"audio,canvas,embed,iframe,img,object,svg,video":{"display":"block","verticalAlign":"middle"},"img,video":{"maxWidth":"100%","height":"auto"}};