@progressiveui/styles 10.30.0

package/README.md

@@ -0,0 +1,85 @@
+# @progressiveui/styles
+
+> Styles for the Bridge Design System
+
+## Getting started
+
+To install `@progressiveui/styles` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @progressiveui/styles
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add @progressiveui/styles
+```
+
+This package requires [Dart Sass](http://npmjs.com/package/sass) in order to
+compile. It uses
+[Sass modules](https://css-tricks.com/introducing-sass-modules/) to organize the
+codebase and provide exports to use.
+
+If you're new to Sass, or are wondering how to configure Sass for your project,
+we recommend checking out the following resources and links:
+
+- [Sass Basics](https://sass-lang.com/guide)
+- [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/)
+- [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
+- [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
+- [Parcel with Sass](https://v2.parceljs.org/languages/sass/)
+- [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors)
+- [Snowpack with Sass](https://www.snowpack.dev/guides/sass/)
+
+Once you get Sass up and running in your project, make sure to configure Sass to
+include `node_modules` in its `includePaths` option. For more information,
+checkout the [configuration](./docs/sass.md#configuration) section in our Sass
+docs.
+
+## Usage
+
+You can bring in all the styles for the Carbon Design System by including
+`@progressiveui/styles` in your Sass files. For example:
+
+```scss
+@use "@progressiveui/styles";
+```
+
+If you only would like to bring in specific components, you can
+import them in a similar way:
+
+```scss
+@use "@progressiveui/styles/scss/reset";
+@use "@progressiveui/styles/scss/components/accordion";
+@use "@progressiveui/styles/scss/components/button";
+@use "@progressiveui/styles/scss/components/checkbox";
+```
+
+There are various helpers that you can include, as well, such as a
+CSS reset, grid, breakpoint helpers, and more. You can include these similar to
+how you bring in components:
+
+```scss
+// Bring in the CSS Reset
+@use "@progressiveui/styles/scss/reset";
+
+// Bring in the CSS Grid
+@use "@progressiveui/styles/scss/grid";
+```
+
+To learn more about the various helpers that `@progressiveui/styles` provides, checkout
+the overview of the files available to use in our
+[Sass docs](./docs/sass.md#files).
+
+## 🙌 Contributing
+
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
+
+## 📝 License
+
+Licensed under the [Apache 2.0 License](/LICENSE).

package/index-with-tokens.scss

@@ -0,0 +1,26 @@
+$css--reset: true;
+$css--body: true;
+
+@use "@progressiveui/styles/scss/themes";
+@use "@progressiveui/styles/scss/theme";
+
+@use "@progressiveui/themes-core/dist/scss/default-css-theme" as defaultTheme;
+@use "@progressiveui/themes-core/distDark/scss/default-css-theme" as darkTheme;
+
+@use "@progressiveui/styles/scss/reset";
+@use "@progressiveui/styles/scss/components";
+
+// Import types
+/* @import "@un/type/scss/font-face/mono";
+@import "@un/type/scss/font-face/sans";
+@import "@un/type/scss/font-face/serif"; */
+
+// @include open-sans-font-face();
+
+:root {
+  @include defaultTheme.theme-default();
+}
+
+.wfp--theme--dark {
+  @include darkTheme.theme-dark();
+}

package/index.scss

@@ -0,0 +1,12 @@
+@forward "scss/config";
+// @forward "scss/colors" hide $white;
+@forward "scss/font-face";
+//TODO: Check @forward 'scss/grid';
+@forward "scss/motion";
+@forward "scss/type";
+@forward "scss/themes";
+@forward "scss/theme";
+@forward "scss/global-defaults";
+
+@use "scss/reset";
+@use "scss/components";

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@progressiveui/styles",
+  "description": "Styles for the WFP Design System",
+  "version": "10.30.0",
+  "license": "Apache-2.0",
+  "author": "Robert Gühne <wfp.org>",
+  "homepage": "https://www.wfp.org",
+  "main": "styles.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wfp/designsystem.git",
+    "directory": "packages/styles"
+  },
+  "bugs": "https://github.com/wfp/designsystem/issues",
+  "keywords": [
+    "styles",
+    "un",
+    "wfp",
+    "wfp-design-system",
+    "components",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "sass --load-path=node_modules --load-path=../../node_modules  --no-source-map --style compressed ./index-with-tokens.scss:styles.css"
+  },
+  "dependencies": {
+    "@carbon/feature-flags": "^0.6.0",
+    "@carbon/grid": "^10.39.0",
+    "@carbon/motion": "^10.22.0",
+    "@progressiveui/themes-core": "^0.4.0",
+    "@un/layout": "^10.26.15",
+    "@un/themes": "^10.40.14"
+  },
+  "devDependencies": {
+    "@carbon/test-utils": "^10.3.0",
+    "css": "^3.0.0"
+  },
+  "gitHead": "a5bec728bba7e239d3d00104c0e24d1b13dd554b"
+}

package/scss/_breakpoint.scss

@@ -0,0 +1,2 @@
+@forward "@carbon/grid/scss/modules/breakpoint" show breakpoint,
+  breakpoint-between, breakpoint-down, breakpoint-up;

package/scss/_config.scss

@@ -0,0 +1,30 @@
+/// The value used to prefix selectors and CSS Custom Properties across the
+/// codebase
+/// @access public
+/// @type String
+/// @group config
+$prefix: "wfp" !default;
+
+/// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
+/// @access public
+/// @type Bool
+/// @group config
+$css--font-face: true !default;
+
+/// If true, include reset CSS
+/// @access public
+/// @type Bool
+/// @group config
+$css--reset: true !default;
+
+/// If true, include default type
+/// @access public
+/// @type Bool
+/// @group config
+$css--default-type: true !default;
+
+/// If true, include IBM Plex Arabic type
+/// @access public
+/// @type Bool
+/// @group config
+$css--plex-arabic: false !default;

package/scss/_feature-flags.scss

@@ -0,0 +1 @@
+@forward "@carbon/feature-flags";

package/scss/_font-face.scss

@@ -0,0 +1,13 @@
+@use 'config';
+//@use '@ibm/plex/default' as sans;
+//@use '@ibm/plex/mono' as mono;
+//@use '@ibm/plex/arabic' as arabic;
+
+@if config.$css--font-face == true {
+ // @include sans.all;
+  //@include mono.all;
+
+  @if config.$css--plex-arabic == true {
+ //   @include arabic.all;
+  }
+} ;

package/scss/_global-defaults.scss

@@ -0,0 +1,14 @@
+/*@use '../../breakpoint' as *;
+@use '../../config' as *;
+@use '../../motion' as *;*/
+@use "./theme" as *;
+/*@use '../../spacing' as *;
+@use '../../type' as *;
+@use '../../utilities/component-reset';
+@use '../../utilities/convert';*/
+
+@mixin globalDefaults() {
+  color: $text-body-default;
+  background: $background-main;
+  font-family: $font-family-primary;
+}

package/scss/_grid.scss

@@ -0,0 +1,32 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'config';
+@use 'sass:math';
+@use 'sass:list';
+/*
+@forward '@carbon/grid'
+  show css-grid,
+       subgrid,
+       $grid-gutter,
+       $grid-gutter-condensed,
+       $grid-breakpoints
+  with (
+    $prefix: config.$prefix
+  );
+
+@use '@carbon/grid';
+*/
+@mixin column-span($span, $columns: false) {
+  flex: 0 0 math.percentage(math.div($span, 12));
+  max-width: math.percentage(math.div($span, 12));
+
+  @if ($columns) {
+    flex: 0 0 math.percentage((math.div($span, $columns)));
+    max-width: math.percentage((math.div($span, $columns)));
+  }
+}

package/scss/_motion.scss

@@ -0,0 +1,67 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/motion';
+@use '@carbon/motion';
+
+/// Used primarily for removing elements from the screen
+/// @type Function
+/// @access public
+/// @group global-motion
+$ease-in: cubic-bezier(0.25, 0, 1, 1);
+
+/// Used for adding elements to the screen or changing on-screen states at a users's input
+/// @type Function
+/// @access public
+/// @group global-motion
+$ease-out: cubic-bezier(0, 0, 0.25, 1);
+
+/// Used for the majority of animations
+/// @type Function
+/// @access public
+/// @group global-motion
+$standard-easing: cubic-bezier(0.5, 0, 0.1, 1);
+
+/// Base transition duration
+/// @type Number
+/// @access public
+/// @group global-motion
+$transition--base: 250ms;
+
+/// Expansion duration
+/// @type Number
+/// @access public
+/// @group global-motion
+$transition--expansion: 300ms;
+
+/// Default ease-in for components
+/// @access public
+/// @type Function
+/// @group global-motion
+$ease-in: cubic-bezier(0, 0, 0.38, 0.9);
+
+/// Default ease-out for components
+/// @access public
+/// @type Function
+/// @group global-motion
+$ease-out: cubic-bezier(0.2, 0, 1, 0.9);
+
+/// Default easing for components
+/// @access public
+/// @type Function
+/// @group global-motion
+$standard-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+/// @access public
+/// @group global-motion
+/// @alias duration--fast-02
+$transition--base: motion.$duration-fast-02;
+
+/// @access public
+/// @group global-motion
+/// @alias duration--moderate-02
+$transition--expansion: motion.$duration-moderate-02;

package/scss/_reset.scss

@@ -0,0 +1,172 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'config';
+@use 'type';
+
+@mixin reset {
+  /// http://meyerweb.com/eric/tools/css/reset/
+  /// v2.0 | 20110126
+  /// License: none (public domain)
+  /// Start vendor reset
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
+    content: '';
+    // stylelint-disable-next-line declaration-block-no-duplicate-properties
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  /// End vendor reset
+
+  html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  @include type.reset();
+
+  /// Makes SVGs accessible in high contrast mode
+  /// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345
+  @media screen and (-ms-high-contrast: active) {
+    svg {
+      fill: ButtonText;
+    }
+  }
+}
+
+@if config.$css--reset == true {
+  @include reset;
+}

package/scss/_spacing.scss

@@ -0,0 +1,4 @@
+@forward "@un/layout/scss/modules/spacing" show $spacing-01, $spacing-02,
+  $spacing-03, $spacing-04, $spacing-05, $spacing-06, $spacing-07, $spacing-08,
+  $spacing-09, $spacing-10, $spacing-11, $spacing-12, $spacing-13,
+  $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04;

package/scss/_theme.scss

@@ -0,0 +1,102 @@
+@use "./config" as *;
+
+//@use '@progressiveui/themes-core/dist/scss/variables' as *;
+@forward "@progressiveui/themes-core/dist/scss/tokens";
+
+/*@forward '@un/themes/scss/modules/theme' with (
+  $fallback: themes.$wfp !default,
+  $theme: compat.$wfp !default,
+);*/
+
+//@forward '@un/themes/scss/modules/tokens';
+// @use '@un/themes/scss/modules/tokens';
+@use "./utilities/custom-property";
+
+/*
+@use './utilities/layer-set' with (
+  $layer-sets: (
+    layer: (
+      tokens.$layer-01,
+      tokens.$layer-02,
+      tokens.$layer-03,
+    ),
+    layer-active: (
+      tokens.$layer-active-01,
+      tokens.$layer-active-02,
+      tokens.$layer-active-03,
+    ),
+    layer-hover: (
+      tokens.$layer-hover-01,
+      tokens.$layer-hover-02,
+      tokens.$layer-hover-03,
+    ),
+    layer-selected: (
+      tokens.$layer-selected-01,
+      tokens.$layer-selected-02,
+      tokens.$layer-selected-03,
+    ),
+    layer-selected-hover: (
+      tokens.$layer-selected-hover-01,
+      tokens.$layer-selected-hover-02,
+      tokens.$layer-selected-hover-03,
+    ),
+    layer-accent: (
+      tokens.$layer-accent-01,
+      tokens.$layer-accent-02,
+      tokens.$layer-accent-03,
+    ),
+    layer-accent-hover: (
+      tokens.$layer-accent-hover-01,
+      tokens.$layer-accent-hover-02,
+      tokens.$layer-accent-hover-03,
+    ),
+    layer-accent-active: (
+      tokens.$layer-accent-active-01,
+      tokens.$layer-accent-active-02,
+      tokens.$layer-accent-active-03,
+    ),
+    field: (
+      tokens.$field-01,
+      tokens.$field-02,
+      tokens.$field-03,
+    ),
+    field-hover: (
+      tokens.$field-hover-01,
+      tokens.$field-hover-02,
+      tokens.$field-hover-03,
+    ),
+    border-subtle: (
+      tokens.$border-subtle-01,
+      tokens.$border-subtle-02,
+      tokens.$border-subtle-03,
+    ),
+    border-subtle-selected: (
+      tokens.$border-subtle-selected-01,
+      tokens.$border-subtle-selected-02,
+      tokens.$border-subtle-selected-03,
+    ),
+    border-strong: (
+      tokens.$border-strong-01,
+      tokens.$border-strong-02,
+      tokens.$border-strong-03,
+    ),
+  ),
+);
+
+// Layer sets
+$layer: custom-property.get-var('layer');
+$layer-active: custom-property.get-var('layer-active');
+$layer-hover: custom-property.get-var('layer-hover');
+$layer-selected: custom-property.get-var('layer-selected');
+$layer-selected-hover: custom-property.get-var('layer-selected-hover');
+$layer-accent: custom-property.get-var('layer-accent');
+$layer-accent-hover: custom-property.get-var('layer-accent-hover');
+$layer-accent-active: custom-property.get-var('layer-accent-active');
+
+$field: custom-property.get-var('field');
+$field-hover: custom-property.get-var('field-hover');
+
+$border-subtle: custom-property.get-var('border-subtle');
+$border-subtle-selected: custom-property.get-var('border-subtle-selected');
+$border-strong: custom-property.get-var('border-strong');
+*/

package/scss/_themes.scss

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//@forward '@un/themes/scss/modules/themes' show $wfp, $white, $g10, $g90, $g100;
+
+@mixin theme($theme: auto) {
+  body:global(.wfp--theme--#{$theme}) & {
+    @content;
+  }
+}