@justeattakeaway/pie-css 0.0.0-snapshot-release-20231123160549

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@justeattakeaway/pie-css",
+  "version": "0.0.0-snapshot-release-20231123160549",
+  "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": "Just Eat Takeaway.com - Design System Team",
+  "files": [
+    "scss"
+  ],
+  "main": "dist/index.css",
+  "scripts": {
+    "build": "run -T ts-node ./buildCss.ts",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "prepublishOnly": "yarn lint:style && yarn lint:scripts && yarn build && yarn test",
+    "test": "run -T vitest run",
+    "test:ci": "yarn test",
+    "test:watch": "run -T vitest"
+  },
+  "keywords": [
+    "PIE",
+    "CSS",
+    "SCSS",
+    "SASS"
+  ],
+  "repository": "https://github.com/justeattakeaway/pie.git",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@types/postcss-import": "14.0.2",
+    "postcss": "8.4.31",
+    "postcss-import": "15.1.0",
+    "w3c-css-validator": "1.3.1"
+  }
+}

package/scss/functions/_unitModifiers.scss

@@ -0,0 +1,68 @@
+// ----------------------------------------------
+// Function for turning a unitless value into a px value
+// The `to-px` function allows you to compute the size using a CSS variable.
+// The resulting value will be multiplied by 1px.
+// -
+// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the to-px calculation.
+// -
+// @example
+// .my-class {
+//   font-size: to-px(--design-token-variable);
+// }
+// -
+// Outputs:
+// .my-class {
+//   font-size: calc(var(--design-token-variable) * 1px);
+// }
+// ----------------------------------------------
+
+@function to-px($token) {
+    @return calc(var(#{$token}) * 1px);
+}
+
+// ----------------------------------------------
+// Function for calculating the font size.
+// The `font-size` function allows you to compute the font size using a CSS variable.
+// The resulting value will be multiplied by 1px.
+// This currently calls the `to-px` function, but is built on top of it should we want to
+// support other units (such as ems/rems) in the future.
+// -
+// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the font size calculation.
+// -
+// @example
+// .my-class {
+//   font-size: font-size(--font-size-variable);
+// }
+// -
+// Outputs:
+// .my-class {
+//   font-size: calc(var(--font-size-variable) * 1px);
+// }
+// ----------------------------------------------
+@function font-size($token) {
+    @return to-px($token);
+}
+
+
+// ----------------------------------------------
+// Function for calculating the line-height.
+// The `line-height` function allows you to compute the line height using a CSS variable.
+// The resulting value will be multiplied by 1px.
+// This currently calls the `to-px` function, but is built on top of it should we want to
+// switch to using different units (such as unitless line heights) in the future.
+// -
+// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the font size calculation.
+// -
+// @example
+// .my-class {
+//   font-size: font-size(--font-size-variable);
+// }
+// -
+// Outputs:
+// .my-class {
+//   font-size: calc(var(--font-size-variable) * 1px);
+// }
+// ----------------------------------------------
+@function line-height($token) {
+    @return to-px($token);
+}

package/scss/functions/index.scss

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

package/scss/helpers/_has-grab-cursor.scss

@@ -0,0 +1,29 @@
+// ----------------------------------------------
+// Extendable Class for adding grab cursor styles.
+// The `%has-grab-cursor` extendable class allows you to apply grab cursor styles to an element.
+// It is intended to signify draggability to the user.
+// It will show a `grab` cursor when the element is hovered,
+// and a `grabbing` cursor when the element is active (being clicked).
+// -
+// @example
+// .foo {
+//   &[isdraggable] {
+//       @extend %has-grab-cursor;
+//   }
+// }
+// -
+// Outputs:
+// .foo[isdraggable] {
+//    cursor: grab;
+//    &:active {
+//        cursor: grabbing;
+//    }
+// }
+// ----------------------------------------------
+%has-grab-cursor {
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}

package/scss/helpers/index.scss

@@ -0,0 +1 @@
+@forward './has-grab-cursor';

package/scss/index.scss

@@ -0,0 +1,3 @@
+@forward 'mixins';
+@forward 'functions';
+@forward 'helpers';

package/scss/mixins/_buttonInteractiveStates.scss

@@ -0,0 +1,47 @@
+// ----------------------------------------------
+// Mixin to define button states for hover, active and loading.
+// ---
+// $bg-color: design token name to be used for the states
+// $mode: 'default': apply the default lighten/darken to the color via hsl
+//        'alt': applies a larger percentage change to the color (darken)
+//        'inverse': inverts the modifier, so that it lightens the color rather than darken it
+//        'transparent': uses hsla syntax to make the color semi-opaque (used for ghost and outline button variants)
+// }
+// ----------------------------------------------
+@mixin button-interactive-states($bg-color, $mode: 'default') {
+    &:hover:not(:disabled) {
+        @if $mode == 'alt' {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-02));
+        } @else if $mode == 'inverse' {
+            --hover-modifier: var(--dt-color-hover-02);
+        } @else {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
+        }
+
+        // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
+        @if $mode == 'transparent' {
+            --hover-modifier: var(--dt-color-hover-01);
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
+        } @else {
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
+        }
+    }
+
+    &:active:not(:disabled),
+    &[isLoading]:not(:disabled) {
+        @if $mode == 'alt' {
+            --active-modifier: calc(-1 * var(--dt-color-active-02));
+        } @else if $mode == 'inverse' {
+            --active-modifier: var(--dt-color-active-02);
+        } @else {
+            --active-modifier: calc(-1 * var(--dt-color-active-01));
+        }
+
+        @if $mode == 'transparent' {
+            --active-modifier: var(--dt-color-active-01);
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
+        } @else {
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
+        }
+    }
+}

package/scss/mixins/_focus.scss

@@ -0,0 +1,18 @@
+// ----------------------------------------------
+// Mixin for adding focus styles.
+// The `focus` mixin allows you to apply a box-shadow with inner and outer focus styles to an element.
+// -
+// @example
+// &:focus-visible {
+//   @include focus;
+// }
+// -
+// Outputs:
+// &:focus-visible {
+//   box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
+// }
+// ----------------------------------------------
+@mixin focus() {
+    box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
+    outline: none;
+}

package/scss/mixins/_unitModifiers.scss

@@ -0,0 +1,44 @@
+// ----------------------------------------------
+// Mixin for setting the font size.
+// The `font-size` mixin allows you to set the font size using a CSS variable.
+// The resulting value will be multiplied by 1px.
+// -
+// @param {String} $token - The CSS variable name to be used for the font size.
+//                          It should include the `--` prefix used in custom properties.
+// -
+// @example
+// .text {
+//   @include font-size(--font-size-small);
+// }
+// -
+// Outputs:
+// .text {
+//   font-size: calc(var(--font-size-small) * 1px);
+// }
+// ----------------------------------------------
+@mixin font-size($token) {
+    font-size: calc(var($token) * 1px);
+}
+
+
+// ----------------------------------------------
+// Mixin for setting the line height.
+// The `line-height` mixin allows you to set the line height using a CSS variable.
+// The resulting value will be multiplied by 1px.
+// -
+// @param {String} $token - The CSS variable name to be used for the line height.
+//                          It should include the `--` prefix used in custom properties.
+// -
+// @example
+// .text {
+//   @include line-height(--dt-font-caption-line-height);
+// }
+// -
+// Outputs:
+// .text {
+//   line-height: calc(var(--dt-font-caption-line-height) * 1px);
+// }
+// ----------------------------------------------
+@mixin line-height($token) {
+    line-height: calc(var($token) * 1px);
+}

package/scss/mixins/_visuallyHidden.scss

@@ -0,0 +1,10 @@
+// Mixin to hide an element yet keep it available for screen readers.
+@mixin visually-hidden() {
+    position: absolute;
+    display: block;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    padding: 1px;
+    white-space: nowrap;
+}

package/scss/mixins/index.scss

@@ -0,0 +1,4 @@
+@forward './buttonInteractiveStates';
+@forward './unitModifiers';
+@forward './focus';
+@forward './visuallyHidden';