@coopdigital/styles 0.5.1 → 0.5.3

package/README.md

@@ -10,12 +10,15 @@
 [all_contributors_badge]: https://img.shields.io/badge/all_contributors-15-C08A00.svg '' 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-
 <a href="https://www.npmjs.com/package/@coopdigital/styles"><img src="https://img.shields.io/npm/v/%40coopdigital%2Fstyles?color=E85A00" alt="npm version" /></a>
 <img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Fstyles?label=published&color=6762F9">
 <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Fstyles?color=819C00">
 [![All Contributors][all_contributors_badge]](#contributors)
 
+> Styles for the Experience Library design system. 
+
+You can see the full range of styles and documentation on the [Experience Kit Storybook](https://static.coop.co.uk/experience-kit-storybook-react)
+
 ## Getting started
 
 Install the package from NPM:
@@ -23,22 +26,21 @@ Install the package from NPM:
 npm install @coopdigital/styles
 ```
 
-Import styles in the format that you need:
+## Usage
+
+Import the main stylesheet and any corresponding component styles you need:
 ```
-@import "@coopdigital/styles/components/Button.css"
-@use "@coopdigital/styles/components/Button.scss"
+import "@coopdigital/styles/dist/main.css"
+import "@coopdigital/styles/dist/components/Pill.css"
 ```
 
-## Package Scripts
-
-The following scripts should be run inside the styles package folder.
-
+Alternatively if your project uses SASS you can import the source stylesheets using either the @use or @import format:
+```
+@use "@coopdigital/styles/src/main.scss"
+@use "@coopdigital/styles/src/components/Pill.scss"
+```
 
-| Script               | Action                                   |
-| -------------------- | ---------------------------------------- |
-| `npm run test` | To run vitest |
-| `npm run test:coverage` | To run vitest test coverage |
-| `npm run build` | To run build script |
+This package can be used alongside our [react components package](https://www.npmjs.com/package/@coopdigital/react).
 
 ## Contributors ✨
 
@@ -139,3 +141,27 @@ Thanks goes to these wonderful people:
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. 
+
+## License
+
+MIT License
+
+Copyright (c) Co-operative Group Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/main.css

@@ -38,7 +38,6 @@
   --color-link-visited: #002c3d;
   --color-focus-ring: #8d44d8;
   /* Reintroducing Co-op branding colours */
-  --color-navy: #003057;
   --color-light-purple: #f8beff;
   --color-light-pink: #ff94bf;
   --color-light-green: #e1ec54;
@@ -54,6 +53,7 @@
   --color-dark-red: #f14f57;
   --color-dark-yellow: #c08a00;
   --color-dark-lilac: #6762f9;
+  --color-navy: #003057;
   /* Shades in use */
   --color-green-light-6: #b9e277;
   --color-red-dark-4: #ba2327;
@@ -63,6 +63,35 @@
   --color-blue-light-10: #eef3fc;
 }
 
+:root {
+  /* Primary green */
+  --color-button-green-primary: #0f8482;
+  --color-button-green-primary-hover: #1c6b6a;
+  --color-button-green-primary-active: #124948;
+  --color-button-primary: var(--color-button-green-primary);
+  --color-button-primary-hover: var(--color-button-green-primary-hover);
+  --color-button-primary-active: var(--color-button-green-primary-active);
+  /* Blue button */
+  --color-button-blue: #005878;
+  --color-button-blue-hover: #003e55;
+  --color-button-blue-active: #001f2b;
+  --color-button-dark: var(--color-button-blue);
+  --color-button-dark-hover: var(--color-button-blue-hover);
+  --color-button-dark-active: var(--color-button-blue-active);
+  /* Grey button */
+  --color-button-grey: #efefef;
+  --color-button-grey-hover: var(--color-grey-mid-light);
+  --color-button-grey-active: var(--color-grey-mid);
+  /* White button */
+  --color-button-white: var(--color-white);
+  --color-button-white-hover: var(--color-button-grey);
+  --color-button-white-active: var(--color-grey-mid-light);
+  /* default button */
+  --color-button: var(--color-button-blue);
+  --color-button-hover: var(--color-button-blue-hover);
+  --color-button-active: var(--color-button-blue-active);
+}
+
 :root {
   --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
   --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
@@ -196,7 +225,6 @@ h4 {
 }
 
 a:not([class]) {
-  color: currentcolor;
   text-decoration-skip-ink: auto;
 }
 
@@ -361,6 +389,10 @@ h6 {
   line-height: 105%;
 }
 
+.coop-t-headline-blue {
+  color: var(--color-brand-coop);
+}
+
 .coop-t-headline-upper {
   font-family: var(--font-family-headline);
   line-height: 100%;

package/dist/reset.css

@@ -75,7 +75,6 @@ h4 {
 }
 
 a:not([class]) {
-  color: currentcolor;
   text-decoration-skip-ink: auto;
 }
 

package/dist/typography.css

@@ -150,6 +150,10 @@ h6 {
   line-height: 105%;
 }
 
+.coop-t-headline-blue {
+  color: var(--color-brand-coop);
+}
+
 .coop-t-headline-upper {
   font-family: var(--font-family-headline);
   line-height: 100%;

package/dist/vars.css

@@ -37,7 +37,6 @@
   --color-link-visited: #002c3d;
   --color-focus-ring: #8d44d8;
   /* Reintroducing Co-op branding colours */
-  --color-navy: #003057;
   --color-light-purple: #f8beff;
   --color-light-pink: #ff94bf;
   --color-light-green: #e1ec54;
@@ -53,6 +52,7 @@
   --color-dark-red: #f14f57;
   --color-dark-yellow: #c08a00;
   --color-dark-lilac: #6762f9;
+  --color-navy: #003057;
   /* Shades in use */
   --color-green-light-6: #b9e277;
   --color-red-dark-4: #ba2327;
@@ -62,6 +62,35 @@
   --color-blue-light-10: #eef3fc;
 }
 
+:root {
+  /* Primary green */
+  --color-button-green-primary: #0f8482;
+  --color-button-green-primary-hover: #1c6b6a;
+  --color-button-green-primary-active: #124948;
+  --color-button-primary: var(--color-button-green-primary);
+  --color-button-primary-hover: var(--color-button-green-primary-hover);
+  --color-button-primary-active: var(--color-button-green-primary-active);
+  /* Blue button */
+  --color-button-blue: #005878;
+  --color-button-blue-hover: #003e55;
+  --color-button-blue-active: #001f2b;
+  --color-button-dark: var(--color-button-blue);
+  --color-button-dark-hover: var(--color-button-blue-hover);
+  --color-button-dark-active: var(--color-button-blue-active);
+  /* Grey button */
+  --color-button-grey: #efefef;
+  --color-button-grey-hover: var(--color-grey-mid-light);
+  --color-button-grey-active: var(--color-grey-mid);
+  /* White button */
+  --color-button-white: var(--color-white);
+  --color-button-white-hover: var(--color-button-grey);
+  --color-button-white-active: var(--color-grey-mid-light);
+  /* default button */
+  --color-button: var(--color-button-blue);
+  --color-button-hover: var(--color-button-blue-hover);
+  --color-button-active: var(--color-button-blue-active);
+}
+
 :root {
   --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
   --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -10,6 +10,14 @@
     "dist",
     "src"
   ],
+  "keywords": [
+    "co-op",
+    "design-system",
+    "experience-kit",
+    "experience-library",
+    "styles",
+    "sass"
+  ],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
@@ -23,5 +31,5 @@
     "glob": "^11.0.1",
     "sass-embedded": "^1.85.0"
   },
-  "gitHead": "5f4108a06b915b2bd2c757bd713026e0710b0eb9"
+  "gitHead": "fdc3cd6c04f66f5b1240f615951d337ac0669eac"
 }

package/src/reset.scss

@@ -76,7 +76,6 @@ h4 {
 }
 
 a:not([class]) {
-  color: currentcolor;
   text-decoration-skip-ink: auto;
 }
 

package/src/typography/_text.scss

@@ -72,6 +72,10 @@ h6 {
   line-height: 105%;
 }
 
+.coop-t-headline-blue {
+  color: var(--color-brand-coop);
+}
+
 .coop-t-headline-upper {
   font-family: var(--font-family-headline);
   line-height: 100%;

package/src/vars/_colours.scss

@@ -44,7 +44,7 @@
   --color-focus-ring: #8d44d8;
 
   /* Reintroducing Co-op branding colours */
-  --color-navy: #003057;
+
   --color-light-purple: #f8beff;
   --color-light-pink: #ff94bf;
   --color-light-green: #e1ec54;
@@ -60,6 +60,7 @@
   --color-dark-red: #f14f57;
   --color-dark-yellow: #c08a00;
   --color-dark-lilac: #6762f9;
+  --color-navy: #003057;
 
   /* Shades in use */
   --color-green-light-6: #b9e277;

package/src/vars.scss

@@ -1,6 +1,6 @@
 @use "./vars/colours";
 
-// @use "./vars/colours-buttons";
+@use "./vars/colours-buttons";
 // @use "./vars/colours-notifications";
 
 @use "./vars/ui";