@cagov/ds-base-css - npm Package Compare versions

Comparing version 1.0.15 to 1.0.18

README.md

CHANGELOG.md

		# Base CSS changelog

		## 1.0.18
		* Updated color scheme to use new variables and color names.
		* Updated buttons styles and variables.
		* Added more font weight variations to _fonts.scss.

		## 1.0.17
		* Added more utility classes (flex for medium and larger devises, height and width classes, more text clasees).
		* Added grid container classes.
		* Added system status color variables and utility classes.
		* Added line-height property to the headings.

		## 1.0.16
		* Removed default button style.

		## 1.0.15
		@@ -7,3 +21,3 @@ * Added new design tokens. Added new utility classes. Added buttons styles.
		## 1.0.14
		* reduce top margin on h2
		* Reduce top margin on h2

		@@ -38,3 +52,3 @@ ## 1.0.13
		## 1.0.3
		* Added CA.gov main colors that are used in CA.gov logo in statewide header and footer to the root variables
		* Added CA<span>.</span>gov main colors that are used in CA<span>.</span>gov logo in statewide header and footer to the root variables

		@@ -41,0 +55,0 @@ ## 1.0.2

package.json

		{
		"name": "@cagov/ds-base-css",
		"version": "1.0.15",
		"version": "1.0.18",
		"description": "",
		@@ -10,4 +10,3 @@ "main": "src/_core.scss",
		"prepublishOnly": "npm run build && npm test && npm run cdn:publish",
		"test": "web-test-runner \"test/*/.js\" --node-resolve",
		"test:visual": "web-test-runner \"test/*/.js\" --node-resolve --config test-config.js"
		"test": "web-test-runner \"test/*/.js\" --node-resolve"
		},
		@@ -14,0 +13,0 @@ "keywords": [],

preview.md

		@@ -9,3 +9,3 @@ # Base CSS Preview
		<input type="radio" id="cagov" name="color-scheme" value="cagov" checked="checked" />
		<label for="drought">CA gov Theme</label>
		<label for="cagov">CA gov Theme</label>
		<input type="radio" id="drought" name="color-scheme" value="drought" />
		@@ -38,96 +38,9 @@ <label for="drought">Drought Theme</label>

		<div class="drought-tokens">
		<h2>Drought Themes token values</h2>

		```css
		:root {
		/* Theme colors */
		--primary-color: #691808;
		--primary-dark-color: #4A1106;
		--primary-light-color: #965D52;
		--primary-lightest-color: #D2BAB5;
		--primary-hover-color: #4A1106;

		--secondary-color: #313131;
		--secondary-dark-color: #222222;
		--secondary-light-color: #6F6F6F;
		--secondary-lightest-color: #C1C1C1;
		--secondary-hover-color: #222222;

		--highlight-color: #FBAD23;
		--highlight-dark-color: #B07919;
		--highlight-light-color: #FCC665;
		--highlight-lightest-color: #FEE6BD;
		--secondary-hover-color: #B07919;
		}
		```
		</div>

		<div class="cannabis-tokens">
		<h2>Cannabis Themes token values</h2>

		```css

		/* Colorscheme root variables */
		:root {
		/* Theme colors */
		--primary-color: #064E66;
		--primary-dark-color: #043747;
		--primary-light-color: #518394;
		--primary-lightest-color: #B4CAD1;
		--primary-hover-color: #043747;

		--secondary-color: #2F4C2C;
		--secondary-dark-color: #21351F;
		--secondary-light-color: #6D826B;
		--secondary-lightest-color: #C1C9C0;
		--secondary-hover-color: #21351F;

		--highlight-color: #C0633B;
		--highlight-dark-color: #864529;
		--highlight-light-color: #D39276;
		--highlight-lightest-color: #ECD0C4;
		--secondary-hover-color: #864529;
		}
		```
		</div>

		<div class="cagov-tokens">
		<h2>CA Gov Themes token values</h2>

		```css
		/* Cagov color scheme root variables */
		:root {
		/* Theme colors */
		--primary-color: #004ABC;
		--primary-dark-color: #003484;
		--primary-light-color: #4D80D0;
		--primary-lightest-color: #B3C9EB;
		--primary-hover-color: #003484;

		--secondary-color: #FF8000;
		--secondary-dark-color: #B35A00;
		--secondary-light-color: #FFA64D;
		--secondary-lightest-color: #FFD9B3;
		--secondary-hover-color: #B35A00;

		--highlight-color: #FEC02F;
		--highlight-dark-color: #B28621;
		--highlight-light-color: #FED36D;
		--highlight-lightest-color: #FFECC1;
		--secondary-hover-color: #B28621;
		}
		```
		</div>


		<script type="text/javascript">
		// write the values of those design token sections dynamically too
		const themes = ['cagov','drought','cannabis'];
		themes.forEach(t => document.querySelector(`.${t}-tokens`).style.display = 'none');
		const onThemeChanged = (e) => {
		const style = document.querySelector('#theme-stylesheet');
		style.setAttribute('href', `/css/${e.target.id}.css`);
		themes.forEach(t => document.querySelector(`.${t}-tokens`).style.display = 'none');
		document.querySelector(`.${e.target.id}-tokens`).style.display = 'block';
		};
		@@ -144,3 +57,3 @@

		fetch('/css/button-grid.html')
		fetch('/css/link-grid.html')
		.then(response => response.text())
		@@ -147,0 +60,0 @@ .then((string) => { document.getElementById('button-grid-html-content').innerHTML = string; });

readme.md

dist/themes/cagov.css