@maggioli-design-system/design-tokens 13.7.2 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/README.md +12 -3
  2. package/dist/android/colors.xml +562 -1452
  3. package/dist/css/colors-hex-brand-rnd.css +39 -37
  4. package/dist/css/colors-hex-brand.css +72 -70
  5. package/dist/css/colors-hex-default.css +732 -664
  6. package/dist/css/colors-hex-label.css +402 -334
  7. package/dist/css/colors-hex-status.css +138 -136
  8. package/dist/css/colors-hex-tones.css +171 -169
  9. package/dist/css/colors-hex.css +897 -2230
  10. package/dist/css/colors-rgb-brand-rnd.css +34 -32
  11. package/dist/css/colors-rgb-brand.css +65 -63
  12. package/dist/css/colors-rgb-default.css +692 -624
  13. package/dist/css/colors-rgb-label.css +399 -331
  14. package/dist/css/colors-rgb-status.css +124 -122
  15. package/dist/css/colors-rgb-tones.css +166 -164
  16. package/dist/css/colors-rgb.css +852 -2185
  17. package/dist/css/tailwind-theme-color.css +306 -0
  18. package/dist/css/tailwind-theme-typography.css +251 -0
  19. package/dist/css/transitions.css +45 -0
  20. package/dist/flutter/colors-brand-rnd.dart +20 -20
  21. package/dist/flutter/colors-brand.dart +41 -41
  22. package/dist/flutter/colors-default.dart +457 -413
  23. package/dist/flutter/colors-label.dart +264 -220
  24. package/dist/flutter/colors-status.dart +80 -80
  25. package/dist/flutter/colors-tones.dart +108 -108
  26. package/dist/flutter/colors.dart +563 -1453
  27. package/dist/flutter/fonts.dart +4 -4
  28. package/dist/ios/StyleDictionaryColor.h +136 -1026
  29. package/dist/ios/StyleDictionaryColor.m +551 -1441
  30. package/dist/ios-swift/StyleDictionary.swift +562 -1452
  31. package/dist/ios-swift/StyleDictionaryColor.swift +562 -1452
  32. package/dist/js/colors-css-vars.js +77 -574
  33. package/dist/js/tailwind-colors-css-vars.js +68 -513
  34. package/dist/js/tailwind-font-family.js +2 -2
  35. package/dist/js/tailwind-font-size.js +20 -2
  36. package/dist/js/tailwind-leading.js +2 -2
  37. package/dist/js/tailwind-props.js +61 -21
  38. package/dist/js/tailwind-screens.js +2 -2
  39. package/dist/json/coolors.json +626 -1620
  40. package/dist/json/css/transitions/duration.json +30 -0
  41. package/dist/json/figma-magma-colors.json +1 -1
  42. package/dist/json/figma-magma-tokens.json +1 -1
  43. package/dist/package.json +11 -15
  44. package/dist/scss/variables.scss +713 -2655
  45. package/dist/src/cli.mjs +2 -5
  46. package/dist/src/config/default-color.json +21 -0
  47. package/dist/src/config/{sd-color-all-platforms.config.js → styledictionary/sd-color-all-platforms.config.js} +5 -4
  48. package/dist/src/formats/css-tailwind-theme-color/css-tailwind-theme-color.js +27 -0
  49. package/dist/src/formats/css-tailwind-theme-color/template.hbs +27 -0
  50. package/dist/src/formats/css-tailwind-theme-typography/css-tailwind-theme-typography.js +43 -0
  51. package/dist/src/formats/css-tailwind-theme-typography/template.hbs +105 -0
  52. package/dist/src/formats/css-vars-hex/template.hbs +10 -8
  53. package/dist/src/formats/css-vars-rgb/template.hbs +4 -2
  54. package/dist/src/formats/css-vars-transitions/css-vars-transitions.js +23 -0
  55. package/dist/src/formats/css-vars-transitions/template.hbs +29 -0
  56. package/dist/src/formats/flutter-font/flutter-font.js +4 -4
  57. package/dist/src/formats/helpers.js +12 -7
  58. package/dist/src/formats/index.js +4 -1
  59. package/dist/src/formats/js-tailwind-props/js-tailwind-props.js +2 -3
  60. package/dist/src/lib/color.mjs +67 -37
  61. package/dist/src/lib/leonardo/index.js +33 -0
  62. package/dist/src/lib/leonardo/lib/backgroundcolor.js +54 -0
  63. package/dist/src/lib/leonardo/lib/chroma-plus.js +216 -0
  64. package/dist/src/lib/leonardo/lib/color.js +134 -0
  65. package/dist/src/lib/leonardo/lib/curve.js +132 -0
  66. package/dist/src/lib/leonardo/lib/theme.js +283 -0
  67. package/dist/src/lib/leonardo/lib/utils.js +505 -0
  68. package/dist/src/lib/utils.mjs +45 -12
  69. package/dist/style-dictionary/tokens/color/generated/brand-rnd.json +18 -18
  70. package/dist/style-dictionary/tokens/color/generated/brand.json +39 -39
  71. package/dist/style-dictionary/tokens/color/generated/default.json +555 -411
  72. package/dist/style-dictionary/tokens/color/generated/label.json +362 -218
  73. package/dist/style-dictionary/tokens/color/generated/status.json +78 -78
  74. package/dist/style-dictionary/tokens/color/generated/tones.json +104 -104
  75. package/dist/style-dictionary/tokens/cosmetic/border.json +9 -3
  76. package/dist/style-dictionary/tokens/cosmetic/box-shadow.json +63 -31
  77. package/dist/style-dictionary/tokens/css/transitions/duration.json +30 -0
  78. package/dist/style-dictionary/tokens/screen/default.json +3 -0
  79. package/dist/style-dictionary/tokens/sizing/{default.json → primitive.json} +54 -0
  80. package/dist/style-dictionary/tokens/sizing/radius.json +43 -0
  81. package/dist/style-dictionary/tokens/sizing/spacing.json +88 -0
  82. package/dist/style-dictionary/tokens/typography/default.json +4 -2
  83. package/package.json +11 -15
  84. package/dist/css/colors-hex-brand-apk.css +0 -281
  85. package/dist/css/colors-hex-brand-mindy.css +0 -50
  86. package/dist/css/colors-hex-brand-synbee.css +0 -83
  87. package/dist/css/colors-hex-synbee-v1.css +0 -1025
  88. package/dist/css/colors-rgb-brand-apk.css +0 -281
  89. package/dist/css/colors-rgb-brand-mindy.css +0 -50
  90. package/dist/css/colors-rgb-brand-synbee.css +0 -83
  91. package/dist/css/colors-rgb-synbee-v1.css +0 -1025
  92. package/dist/flutter/colors-brand-apk.dart +0 -196
  93. package/dist/flutter/colors-brand-mindy.dart +0 -42
  94. package/dist/flutter/colors-brand-synbee.dart +0 -64
  95. package/dist/flutter/colors-synbee-v1.dart +0 -692
  96. package/dist/src/config/deafult-color.json +0 -13
  97. package/dist/style-dictionary/tokens/color/generated/brand-apk.json +0 -584
  98. package/dist/style-dictionary/tokens/color/generated/brand-mindy.json +0 -78
  99. package/dist/style-dictionary/tokens/color/generated/brand-synbee.json +0 -150
  100. package/dist/style-dictionary/tokens/color/generated/synbee-v1.json +0 -2124
  101. package/dist/style-dictionary/tokens/color/themes.json +0 -32
  102. /package/dist/src/config/{sd-brand-color.config.js → styledictionary/sd-brand-color.config.js} +0 -0
package/README.md CHANGED
@@ -4,6 +4,15 @@ Generates design tokens for colors and other type of agnostic tokens targeted on
4
4
 
5
5
  This library is based on [Adobe Leonardo][adobe-leonardo] and [Amazon Style Dictionary][style-dictionary].
6
6
 
7
+ # Compatibility
8
+
9
+ Use the version of this package matching the major version of [`@maggioli-design-system/magma`](https://www.npmjs.com/package/@maggioli-design-system/magma) you are using:
10
+
11
+ | magma | design-tokens | styles |
12
+ | :--- | :--- | :--- |
13
+ | `1.x` (before Magma 2) | `13.x` (latest `13.7.2`) | `15.x` (latest `15.11.1`) |
14
+ | `2.x` and later | `>= 14` | `>= 16` |
15
+
7
16
  # Installation
8
17
 
9
18
  Install the component via `npm` by running the following command:
@@ -68,7 +77,7 @@ Basic config
68
77
  ```json
69
78
  {
70
79
  "colors": [
71
- { "color": "#94a3b8", "name": "tone.slate" },
80
+ { "color": "#94a3b8", "name": "tone.porcelain" },
72
81
  { "color": "#EA3464", "name": "label.amaranth" }
73
82
  ]
74
83
  }
@@ -79,7 +88,7 @@ You can export different color in different output file defining export field
79
88
  ```json
80
89
  {
81
90
  "colors": [
82
- { "color": "#94a3b8", "name": "tone.slate", "export": ["tones"] },
91
+ { "color": "#94a3b8", "name": "tone.porcelain", "export": ["tones"] },
83
92
  { "color": "#EA3464", "name": "label.amaranth", "export": ["label"] }
84
93
  ]
85
94
  }
@@ -90,7 +99,7 @@ You can choose the ratio with which to generate the color scale with `ratios` fi
90
99
  ```json
91
100
  {
92
101
  "colors": [
93
- { "color": "#94a3b8", "name": "tone.slate", "ratios": "tone" },
102
+ { "color": "#94a3b8", "name": "tone.porcelain", "ratios": "tone" },
94
103
  { "color": "#EA3464", "name": "label.amaranth", "ratios": "v1" }
95
104
  ]
96
105
  }