@design-factory/tokens 21.0.0-next.1 → 21.0.0

package/README.md

@@ -4,10 +4,28 @@
 
 Design Factory Tokens is the package containing the Design Tokens used by Amadeus Design System, Design Factory.
 
+Design Factory is an InnerSource design system made of:
+
+- A UI library for Amadeus external and internal interfaces and applications, based on our four pillars
+- A set of design and coding best practices
+- A cross-functional community from all Amadeus business units
+
+If you want to get more information about Design Factory, please contact [Design Factory team](mailto:DesignFactory@amadeus.com).
+
+## Architecture
+
+The Design Factory is composed of multiple projects and you can install the package that fits your requirements.
+
+- `@design-factory/tokens` includes the Design Tokens that empower the Design System
+- `@design-factory/styles` includes the styles, composed of utilities and component styles
+- `@design-factory/design-factory` contains Angular components and utilities. They will be migrated to the following package
+- `@design-factory/angular` contains the new SideNav and will grow to include all Design Factory Angular components
+
 ## Exports
 
 The package `@design-factory/tokens` exports the following entry points to interact with tokens:
 
 - `@design-factory/tokens/figma/*.json` lists all tokens in a JSON format, by tier (t0, t1, t2 and t3)
 - `@design-factory/tokens/style-dictionary-config` exposes the style-dictionary utilities that can be used to customize the DF theme
-- `@design-factory/tokens/scss/*` exposes the sass vars, root css vars and bs mapping
+- `@design-factory/tokens/scss/*` exposes the sass vars light and dark mode and root scss
+- `@design-factory/tokens/css/*` exposes the root css vars, light and dark mode

package/config.cjs

@@ -5,8 +5,9 @@ const enums = require("style-dictionary/enums");
 const utils = require("style-dictionary/utils");
 const os = require("os");
 const tier3ScopingMap = {
-  button: `.btn,${os.EOL}  .btn-close`,
   //needing .btn-close because the alert uses it// TODO: remove when wrapping alert
+  //needing .ng-arrow-wrapper because of select component // TODO remove when wrapping select
+  button: `.btn,${os.EOL}  .btn-close,${os.EOL}  .ng-arrow-wrapper`,
   badge: ".badge",
   footer: ".df-app-footer",
   navbar: ".navbar",

package/config.js

@@ -3,8 +3,9 @@ import { transformTypes, transforms as transforms$1 } from "style-dictionary/enu
 import { fileHeader, sortByReference, usesReferences } from "style-dictionary/utils";
 import { EOL } from "os";
 const tier3ScopingMap = {
-  button: `.btn,${EOL}  .btn-close`,
   //needing .btn-close because the alert uses it// TODO: remove when wrapping alert
+  //needing .ng-arrow-wrapper because of select component // TODO remove when wrapping select
+  button: `.btn,${EOL}  .btn-close,${EOL}  .ng-arrow-wrapper`,
   badge: ".badge",
   footer: ".df-app-footer",
   navbar: ".navbar",

package/css/root-dark.css

@@ -752,7 +752,8 @@ html:root[data-df-theme='dark'] {
 
   /* Tier 3 Scoped tokens */
   .btn,
-  .btn-close {
+  .btn-close,
+  .ng-arrow-wrapper {
     --df-button-borderRadius-main-null: 0;
     --df-button-borderRadius-main-small: 0.25rem;
     --df-button-borderRadius-main-medium: 0.375rem;

package/css/root-light.css

@@ -752,7 +752,8 @@ html:root {
 
   /* Tier 3 Scoped tokens */
   .btn,
-  .btn-close {
+  .btn-close,
+  .ng-arrow-wrapper {
     --df-button-borderRadius-main-null: 0;
     --df-button-borderRadius-main-small: 0.25rem;
     --df-button-borderRadius-main-medium: 0.375rem;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/tokens",
   "description": "Amadeus design system tokens",
   "license": "BSD-3-Clause",
-  "version": "21.0.0-next.1",
+  "version": "21.0.0",
   "type": "module",
   "peerDependencies": {
     "style-dictionary": "^5.0.0"
@@ -14,8 +14,8 @@
   },
   "exports": {
     "./style-dictionary-config": {
-      "import": "./style-dictionary.config.js",
-      "default": "./style-dictionary.config.cjs"
+      "import": "./config.js",
+      "default": "./config.cjs"
     },
     "./figma/*": "./figma/*",
     "./scss/*": "./scss/*.scss",

package/scss/root.scss

@@ -749,7 +749,8 @@
   --df-color-tooltip-background: #{$df-color-tooltip-background};
   // Tier 3 Scoped tokens 
   .btn,
-  .btn-close {
+  .btn-close,
+  .ng-arrow-wrapper {
     --df-button-borderRadius-main-null: #{$df-button-borderRadius-main-null};
     --df-button-borderRadius-main-small: #{$df-button-borderRadius-main-small};
     --df-button-borderRadius-main-medium: #{$df-button-borderRadius-main-medium};