@ouds/web-orange-compact 1.1.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ouds/web-orange-compact",
+  "description": "OUDS Web Orange Compact is a Bootstrap based, Orange Compact branded accessible and ergonomic components library.",
+  "version": "1.1.0",
+  "config": {
+    "version_short": "1.1"
+  },
+  "sass": "scss/ouds-web.scss",
+  "style": "dist/css/ouds-web.css",
+  "keywords": [
+    "css",
+    "sass",
+    "mobile-first",
+    "responsive",
+    "front-end",
+    "framework",
+    "web",
+    "bootstrap",
+    "Orange Compact"
+  ],
+  "homepage": "https://web.unified-design-system.orange.com/orange-compact/",
+  "author": "The OUDS Web Authors (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/graphs/contributors)",
+  "contributors": [
+    "Orange SA"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues"
+  },
+  "files": [
+    "dist/css/*.{css,map}",
+    "scss/**/*.scss",
+    "orange-compact-logo.svg",
+    "NOTICE.txt",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@ouds/web-common": "file:../.."
+  },
+  "scripts": {
+    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
+    "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=../../node_modules/ scss/:dist/css/",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config ../../build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
+    "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
+    "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location ../../.cache/.stylelintcache",
+    "css-lint-vars": "fusv scss/ --ignoreFiles **/tokens/_component.scss,**/tokens/_raw.scss,**/tokens/_semantic.scss,**/tokens/_semantic-colors-custom-props.scss",
+    "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
+    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
+    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+    "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
+    "css-prefix-main": "postcss --config ../../build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "astro-dev": "cross-env BRAND=orange-compact astro dev --root ../../site --port 9003",
+    "astro-build": "cross-env BRAND=orange-compact astro build --root ../../site && cd ../../site/dist && cp -r . ../../_site",
+    "astro-preview": "cross-env BRAND=orange-compact astro preview --root ../../site --port 9003",
+    "release-zip": "cd ../.. && cross-env-shell \"rm -rf /ouds-web-orange-compact-$npm_package_version-dist ouds-web-orange-compact-$npm_package_version-dist.zip && cp -r dist/ ouds-web-orange-compact-$npm_package_version-dist && cp -r packages/orange-compact/dist/ ouds-web-orange-compact-$npm_package_version-dist/ && zip -qr9 ouds-web-orange-compact-$npm_package_version-dist.zip ouds-web-orange-compact-$npm_package_version-dist && rm -rf ouds-web-orange-compact-$npm_package_version-dist\""
+  },
+  "license": "MIT"
+}

package/scss/ouds-web-bootstrap.scss

@@ -0,0 +1,3 @@
+$enable-bootstrap-compatibility: true !default;
+
+@import "ouds-web";

package/scss/ouds-web-grid.scss

@@ -0,0 +1,64 @@
+@import "@ouds/web-common/scss/mixins/banner";
+@include bsBanner(Grid);
+
+$include-column-box-sizing: true !default;
+
+@import "@ouds/web-common/scss/config";
+@import "@ouds/web-common/scss/functions";
+@import "@ouds/web-orange-compact/scss/tokens";
+@import "@ouds/web-common/scss/variables";
+@import "@ouds/web-common/scss/variables-dark";
+@import "@ouds/web-common/scss/maps";
+
+@import "@ouds/web-common/scss/mixins/breakpoints";
+@import "@ouds/web-common/scss/mixins/container";
+@import "@ouds/web-common/scss/mixins/grid";
+@import "@ouds/web-common/scss/mixins/utilities";
+
+@import "@ouds/web-common/scss/vendor/rfs";
+
+@import "@ouds/web-common/scss/containers";
+@import "@ouds/web-common/scss/grid";
+
+@import "@ouds/web-common/scss/utilities";
+// Only use the utilities we need
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-get-multiple(
+  $utilities,
+  (
+    "display",
+    "order",
+    "flex",
+    "flex-direction",
+    "flex-grow",
+    "flex-shrink",
+    "flex-wrap",
+    "justify-content",
+    "align-items",
+    "align-content",
+    "align-self",
+    "margin",
+    "margin-x",
+    "margin-y",
+    "margin-top",
+    "margin-end",
+    "margin-bottom",
+    "margin-start",
+    "negative-margin",
+    "negative-margin-x",
+    "negative-margin-y",
+    "negative-margin-top",
+    "negative-margin-end",
+    "negative-margin-bottom",
+    "negative-margin-start",
+    "padding",
+    "padding-x",
+    "padding-y",
+    "padding-top",
+    "padding-end",
+    "padding-bottom",
+    "padding-start",
+  )
+);
+
+@import "@ouds/web-common/scss/utilities/api";

package/scss/ouds-web-reboot.scss

@@ -0,0 +1,12 @@
+@import "@ouds/web-common/scss/mixins/banner";
+@include bsBanner(Reboot);
+
+@import "@ouds/web-common/scss/config";
+@import "@ouds/web-common/scss/functions";
+@import "@ouds/web-orange-compact/scss/tokens";
+@import "@ouds/web-common/scss/variables";
+@import "@ouds/web-common/scss/variables-dark";
+@import "@ouds/web-common/scss/maps";
+@import "@ouds/web-common/scss/mixins";
+@import "@ouds/web-common/scss/root";
+@import "@ouds/web-common/scss/reboot";

package/scss/ouds-web-utilities.scss

@@ -0,0 +1,21 @@
+@import "@ouds/web-common/scss/mixins/banner";
+@include bsBanner(Utilities);
+
+// Configuration
+@import "@ouds/web-common/scss/config";
+@import "@ouds/web-common/scss/functions";
+@import "@ouds/web-orange-compact/scss/tokens";
+@import "@ouds/web-common/scss/variables";
+@import "@ouds/web-common/scss/variables-dark";
+@import "@ouds/web-common/scss/maps";
+@import "@ouds/web-common/scss/mixins";
+@import "@ouds/web-common/scss/utilities";
+
+// Layout & components
+@import "@ouds/web-common/scss/root";
+
+// Helpers
+@import "@ouds/web-common/scss/helpers";
+
+// Utilities
+@import "@ouds/web-common/scss/utilities/api";

package/scss/ouds-web.scss

@@ -0,0 +1,67 @@
+@import "@ouds/web-common/scss/mixins/banner";
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
+@import "@ouds/web-common/scss/config";
+@import "@ouds/web-common/scss/functions";
+@import "@ouds/web-orange-compact/scss/tokens";
+@import "@ouds/web-common/scss/variables";
+@import "@ouds/web-common/scss/variables-dark";
+@import "@ouds/web-common/scss/maps";
+@import "@ouds/web-common/scss/mixins";
+@import "@ouds/web-common/scss/utilities";
+
+// Layout & components
+@import "@ouds/web-common/scss/root";
+@import "@ouds/web-common/scss/reboot";
+@import "@ouds/web-common/scss/type";
+@import "@ouds/web-common/scss/images";
+@import "@ouds/web-common/scss/containers";
+@import "@ouds/web-common/scss/grid";
+@import "@ouds/web-common/scss/tables";
+@import "@ouds/web-common/scss/forms";
+@import "@ouds/web-common/scss/links"; // OUDS mod
+@import "@ouds/web-common/scss/bullet-list"; // OUDS mod
+@import "@ouds/web-common/scss/buttons";
+@import "@ouds/web-common/scss/chips"; // OUDS mod
+@import "@ouds/web-common/scss/transitions";
+@import "@ouds/web-common/scss/dropdown";
+@import "@ouds/web-common/scss/button-group";
+@import "@ouds/web-common/scss/nav";
+@import "@ouds/web-common/scss/navbar";
+@import "@ouds/web-common/scss/card";
+@import "@ouds/web-common/scss/accordion";
+@import "@ouds/web-common/scss/breadcrumb";
+@import "@ouds/web-common/scss/pagination";
+@import "@ouds/web-common/scss/badges";
+@import "@ouds/web-common/scss/tags";
+@import "@ouds/web-common/scss/alert";
+@import "@ouds/web-common/scss/progress";
+@import "@ouds/web-common/scss/list-group";
+// OUDS mod: no @import "@ouds/web-common/scss/close";
+@import "@ouds/web-common/scss/toasts";
+@import "@ouds/web-common/scss/modal";
+@import "@ouds/web-common/scss/tooltip";
+@import "@ouds/web-common/scss/popover";
+@import "@ouds/web-common/scss/carousel";
+@import "@ouds/web-common/scss/spinners";
+@import "@ouds/web-common/scss/offcanvas";
+@import "@ouds/web-common/scss/placeholders";
+
+// OUDS Web
+@import "@ouds/web-common/scss/back-to-top";
+@import "@ouds/web-common/scss/footer";
+@import "@ouds/web-common/scss/local-navigation";
+@import "@ouds/web-common/scss/orange-navbar";
+@import "@ouds/web-common/scss/stepped-process";
+@import "@ouds/web-common/scss/sticker";
+@import "@ouds/web-common/scss/title-bars";
+
+// Helpers
+@import "@ouds/web-common/scss/helpers";
+
+
+// Utilities
+@import "@ouds/web-common/scss/utilities/api";
+// scss-docs-end import-stack

package/scss/tokens/_component-colors-custom-props.scss

@@ -0,0 +1,114 @@
+// Components custom properties applications
+// OUDS Core tokens version 1.9.0
+// Orange Compact Core tokens version 1.2.0
+// Orange Compact System tokens version 2.3.0
+
+// scss-docs-start ouds-all-component-css-color
+// scss-docs-start ouds-component-css-color
+@include color-mode(light, true) {
+  --#{$prefix}button-color-bg-brand-pressed: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-color-bg-brand-loading: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-default-pressed: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-default-loading: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-default-focus: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-strong-enabled: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-bg-strong-hover: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-strong-pressed: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-strong-loading: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-strong-disabled: #{$core-ouds-color-opacity-black-280};
+  --#{$prefix}button-mono-color-bg-strong-focus: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-minimal-hover: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-minimal-pressed: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-minimal-focus: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-content-default-enabled: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-default-hover: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-default-pressed: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-default-loading: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-default-disabled: #{$core-ouds-color-opacity-black-280};
+  --#{$prefix}button-mono-color-content-default-focus: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-minimal-enabled: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-minimal-hover: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-minimal-pressed: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-minimal-loading: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-minimal-disabled: #{$core-ouds-color-opacity-black-280};
+  --#{$prefix}button-mono-color-content-minimal-focus: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-white-640};
+  --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-black-280};
+  --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black};
+  --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black};
+  --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520};
+  --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280};
+  --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black};
+  --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white};
+  --#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-700};
+  --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750};
+  --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440};
+  --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520};
+  --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500};
+  --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750};
+  --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-black};
+}
+// scss-docs-end ouds-component-css-color
+
+@include color-mode(dark, true) {
+  --#{$prefix}button-color-bg-brand-pressed: #{$core-ouds-color-functional-gray-light-160};
+  --#{$prefix}button-color-bg-brand-loading: #{$core-ouds-color-functional-gray-light-160};
+  --#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-default-pressed: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-default-loading: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-default-focus: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-strong-enabled: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-bg-strong-hover: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-strong-pressed: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-strong-loading: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-strong-disabled: #{$core-ouds-color-opacity-white-440};
+  --#{$prefix}button-mono-color-bg-strong-focus: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-minimal-hover: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-bg-minimal-pressed: #{$core-ouds-color-opacity-black-680};
+  --#{$prefix}button-mono-color-bg-minimal-focus: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}button-mono-color-content-default-enabled: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-default-hover: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-default-pressed: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-default-loading: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-default-disabled: #{$core-ouds-color-opacity-white-440};
+  --#{$prefix}button-mono-color-content-default-focus: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-minimal-enabled: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-minimal-hover: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-minimal-pressed: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-minimal-loading: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-minimal-disabled: #{$core-ouds-color-opacity-white-440};
+  --#{$prefix}button-mono-color-content-minimal-focus: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-black-440};
+  --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black};
+  --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-white};
+  --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-white-440};
+  --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white};
+  --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white};
+  --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440};
+  --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white};
+  --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-gray-dark-880};
+  --#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-600};
+  --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300};
+  --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640};
+  --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800};
+  --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300};
+  --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark};
+  --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-gray-light-160};
+}
+// scss-docs-end ouds-all-component-css-color