@justeattakeaway/pie-css 0.3.0 → 0.4.0

package/README.md

@@ -10,6 +10,117 @@
 
 # PIE CSS
 
-A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.
+# Table of Contents
+
+1. [Introduction](#pie-css)
+2. [Installation](#installation)
+   1. JS or Framework import (via bundler)
+   2. NuxtJS
+   3. Sass /SCSS
+   4. Native HTML
+3. [Using the PIE CSS – SCSS helpers](#helpers)
+
+## Introduction
+
+PIE CSS is A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.
 
 ---
+
+## Installing PIE CSS shared CSS styles
+
+To install the PIE CSS library, run the following on your command line:
+
+```bash
+# npm
+npm i @justeattakeaway/pie-css
+
+# yarn
+yarn add @justeattakeaway/pie-css
+```
+
+Once installed, how you include PIE CSS will largely depend on the type of application you are building (and your own preference), but here are a few examples.
+
+
+### JS or Framework import (via bundler)
+
+One common way of importing PIE CSS would be through a regular JS import as part of your application bundle.
+
+```js
+import '@justeattakeaway/pie-css';
+```
+
+
+For example, in React (or NextJS), you could add the `pie-css` import to your `App.js` file:
+
+```js
+import '@justeattakeaway/pie-css';
+
+function App () {
+    return (
+        …
+    );
+}
+
+export default App;
+```
+
+Similarly, in Vue 3, you will likely include it as part of your `/src/main.ts` file:
+
+
+```js
+import { createApp } from 'vue';
+import '@justeattakeaway/pie-css';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+```
+
+### NuxtJS
+
+If you are using NuxtJS, you can import PIE CSS in your `nuxt.config.js` file.
+
+
+For NuxtJS v3, this would look like this:
+
+```js
+// Nuxt v3
+export default defineNuxtConfig({
+    css: ['@justeattakeaway/pie-css'],
+    …
+});
+ ```
+
+For NuxtJS v2, it is very similar, looking more like this:
+
+```js
+export default {
+    css: [
+        '@justeattakeaway/pie-css',
+    ],
+    …
+}
+```
+
+
+### Sass / SCSS
+
+If you are using Sass, you could import the CSS file as part of your styles directly.
+
+```scss
+@use 'node_modules/@justeattakeaway/pie-css/dist/index.css';
+```
+
+
+### Native HTML
+
+Of course, you could include the styles straight inside your HTML document – most likely you'd want to link to the `/@justeattakeaway/pie-css/dist/index.css` CSS file in the head of your HTML.
+
+
+
+## Using the PIE CSS – SCSS helpers
+
+PIE CSS also has an optional set of SCSS helpers that are used by the PIE Web Components.
+
+These are for carrying out common tasks in our styles, such as setting font sizes in consistent ways and sharing styles across components via SCSS mixins and functions.
+
+We will be writing more in-depth docs on these SCSS helpers shortly, but for now, feel free to browse the [SCSS code in the PIE mono-repo](https://github.com/justeattakeaway/pie/tree/main/packages/tools/pie-css/scss).

package/dist/index.css

@@ -1,4 +1,4 @@
-:root, ::backdrop {
+:root {
     /* Global tokens - Color */
     --dt-color-aubergine-10: #e7d6e7;
     --dt-color-aubergine-80: #452844;
@@ -75,6 +75,7 @@
     --dt-color-container-strong: var(--dt-color-mozzarella-20);
     --dt-color-container-dark: var(--dt-color-mozzarella-90);
     --dt-color-container-inverse: var(--dt-color-mozzarella-90);
+    --dt-color-container-inverse-alternative: var(--dt-color-mozzarella-90);
     --dt-color-border-default: var(--dt-color-mozzarella-20);
     --dt-color-border-subtle: var(--dt-color-mozzarella-10);
     --dt-color-border-strong: var(--dt-color-mozzarella-30);
@@ -158,6 +159,7 @@
     --dt-color-highcontrast-container-strong: var(--dt-color-white);
     --dt-color-highcontrast-container-dark: var(--dt-color-black);
     --dt-color-highcontrast-container-inverse: var(--dt-color-black);
+    --dt-color-highcontrast-container-inverse-alternative: var(--dt-color-black);
     --dt-color-highcontrast-border-default: var(--dt-color-black);
     --dt-color-highcontrast-border-subtle: var(--dt-color-black);
     --dt-color-highcontrast-border-strong: var(--dt-color-black);
@@ -241,6 +243,7 @@
     --dt-color-dark-container-strong: var(--dt-color-mozzarella-70);
     --dt-color-dark-container-dark: var(--dt-color-mozzarella-90);
     --dt-color-dark-container-inverse: var(--dt-color-white);
+    --dt-color-dark-container-inverse-alternative: var(--dt-color-mozzarella-70);
     --dt-color-dark-border-default: var(--dt-color-mozzarella-70);
     --dt-color-dark-border-subtle: var(--dt-color-mozzarella-75);
     --dt-color-dark-border-strong: var(--dt-color-mozzarella-60);
@@ -324,6 +327,7 @@
     --dt-color-highcontrast-dark-container-strong: var(--dt-color-black);
     --dt-color-highcontrast-dark-container-dark: var(--dt-color-black);
     --dt-color-highcontrast-dark-container-inverse: var(--dt-color-white);
+    --dt-color-highcontrast-dark-container-inverse-alternative: var(--dt-color-black);
     --dt-color-highcontrast-dark-border-default: var(--dt-color-white);
     --dt-color-highcontrast-dark-border-subtle: var(--dt-color-white);
     --dt-color-highcontrast-dark-border-strong: var(--dt-color-white);
@@ -655,7 +659,7 @@
     --dt-elevation-dark-inverse-04: var(--dt-elevation-box-shadow-04);
     --dt-elevation-dark-inverse-05: var(--dt-elevation-box-shadow-05);
 }
-:root, ::backdrop {
+:root {
     --dt-color-aubergine-10-h: 300;
     --dt-color-aubergine-10-s: 26.2%;
     --dt-color-aubergine-10-l: 87.3%;
@@ -875,6 +879,9 @@
     --dt-color-container-inverse-h: var(--dt-color-mozzarella-90-h);
     --dt-color-container-inverse-s: var(--dt-color-mozzarella-90-s);
     --dt-color-container-inverse-l: var(--dt-color-mozzarella-90-l);
+    --dt-color-container-inverse-alternative-h: var(--dt-color-mozzarella-90-h);
+    --dt-color-container-inverse-alternative-s: var(--dt-color-mozzarella-90-s);
+    --dt-color-container-inverse-alternative-l: var(--dt-color-mozzarella-90-l);
     --dt-color-border-default-h: var(--dt-color-mozzarella-20-h);
     --dt-color-border-default-s: var(--dt-color-mozzarella-20-s);
     --dt-color-border-default-l: var(--dt-color-mozzarella-20-l);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
   "author": "JustEatTakeaway - Design System Web Team",
   "files": [
@@ -28,6 +28,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/postcss-import": "14.0.0",
+    "postcss": "8.4.29",
     "postcss-import": "15.1.0",
     "w3c-css-validator": "1.3.1"
   }

package/scss/helpers/_helpers.scss

@@ -0,0 +1,9 @@
+// Allows a grab handle to appear.
+// Currently used in the card container component.
+%has-grab-cursor {
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}

package/scss/helpers/index.scss

@@ -0,0 +1 @@
+@forward './helpers';

package/scss/index.scss

@@ -1,2 +1,3 @@
 @forward './mixins/';
 @forward './functions/';
+@forward 'helpers';