feat: new component tokens

DevoInc · Oct 14, 2024 · 0a1fb75 · 0a1fb75
1 parent b5f10ff
commit 0a1fb75
Show file tree

Hide file tree

Showing 40 changed files with 944 additions and 251 deletions.
diff --git a/tokens/src/tokens/alias/groups/fields.json b/tokens/src/tokens/alias/groups/fields.json
@@ -593,13 +593,13 @@
               "value": "{alias.fields.color.text.base.placeholder.value}"
             },
             "error": {
-              "value": "{alias.fields.color.text.error.placeholder.value}"
+              "value": "{alias.fields.color.border.error.enabled.value}"
             },
             "success": {
-              "value": "{alias.fields.color.text.success.placeholder.value}"
+              "value": "{alias.fields.color.border.success.enabled.value}"
             },
             "warning": {
-              "value": "{alias.fields.color.text.warning.placeholder.value}"
+              "value": "{alias.fields.color.border.warning.enabled.value}"
             }
           }
         },

diff --git a/tokens/src/tokens/component/date/Calendar/calendar__day.json b/tokens/src/tokens/component/date/Calendar/calendar__day.json
@@ -44,7 +44,12 @@
         },
         "shape": {
           "borderRadius": {
-            "value": "{alias.shape.borderRadius.full.value}"
+            "base": {
+              "value": "{alias.shape.borderRadius.full.value}"
+            },
+            "corners": {
+              "value": "{alias.shape.borderRadius.full.value}"
+            }
           },
           "opacity": {
             "disabled": {

diff --git a/tokens/src/tokens/component/date/DateRange/date-range.json b/tokens/src/tokens/component/date/DateRange/date-range.json
@@ -123,6 +123,63 @@
           }
         }
       },
+      "realTimeIcon": {
+        "typo": {
+          "xxs": {
+            "value": "{alias.typo.fontSize.icon.xxxxs.value}"
+          },
+          "xs": {
+            "value": "{alias.typo.fontSize.icon.xxxs.value}"
+          },
+          "sm": {
+            "value": "{alias.typo.fontSize.icon.xxs.value}"
+          },
+          "md": {
+            "value": "{alias.typo.fontSize.icon.xs.value}"
+          },
+          "lg": {
+            "value": "{alias.typo.fontSize.icon.sm.value}"
+          }
+        },
+        "color": {
+          "background": {
+            "active": {
+              "base": {
+                "value": "{alias.color.background.action.accentHigh.enabled.value}"
+              },
+              "hovered": {
+                "value": "{alias.color.background.action.accentHigh.selected.value}"
+              }
+            },
+            "base": {
+              "base": {
+                "value": "{alias.color.background.action.blendBase.enabled.value}"
+              },
+              "hovered": {
+                "value": "{alias.color.background.action.blendBase.hovered.value}"
+              }
+            }
+          },
+          "text": {
+            "active": {
+              "base": {
+                "value": "{alias.color.text.action.accentHigh.enabled.value}"
+              },
+              "hovered": {
+                "value": "{alias.color.text.action.accentHigh.selected.value}"
+              }
+            },
+            "base": {
+              "base": {
+                "value": "{alias.color.text.action.blendBase.enabled.value}"
+              },
+              "hovered": {
+                "value": "{alias.color.text.action.blendBase.hovered.value}"
+              }
+            }
+          }
+        }
+      },
       "realTimeLoader": {
         "color": {
           "fill": {

diff --git a/tokens/src/tokens/component/feedback/BoxMessage/box-message.json b/tokens/src/tokens/component/feedback/BoxMessage/box-message.json
@@ -3,22 +3,40 @@
     "boxMessage": {
       "shape": {
         "borderSize": {
-          "value": "{alias.shape.borderSize.panel.base.value}"
+          "base": {
+            "value": "{alias.shape.borderSize.panel.base.value}"
+          },
+          "subtle": {
+            "value": "0"
+          }
         },
         "borderRadius": {
           "value": "{alias.shape.borderRadius.md.value}"
         }
       },
       "space": {
-        "padding": {
-          "value": "{alias.space.cmp.sm.value}"
-        },
         "gap": {
-          "value": "{alias.space.cmp.sm.value}"
+          "base": {
+            "value": "{alias.space.cmp.sm.value}"
+          },
+          "subtle": {
+            "value": "{alias.space.cmp.xs.value}"
+          }
+        },
+        "padding": {
+          "base": {
+            "value": "{alias.space.cmp.sm.value}"
+          },
+          "subtle": {
+            "value": "{alias.space.cmp.xxs.value} {alias.space.cmp.xs.value}"
+          }
         }
       },
       "color": {
         "background": {
+          "subtle": {
+            "value": "{alias.color.background.surface.base.featured.value}"
+          },
           "success": {
             "value": "{brand.boxMessage.color.background.success.value}"
           },

diff --git a/tokens/src/tokens/component/feedback/BoxMessage/box-message__close.json b/tokens/src/tokens/component/feedback/BoxMessage/box-message__close.json
@@ -5,10 +5,10 @@
         "space": {
           "offset": {
             "top": {
-              "value": "calc({cmp.boxMessage.space.padding.value} - 0.2rem)"
+              "value": "calc({cmp.boxMessage.space.padding.base.value} - 0.2rem)"
             },
             "right": {
-              "value": "{cmp.boxMessage.space.padding.value}"
+              "value": "{cmp.boxMessage.space.padding.base.value}"
             }
           }
         }

diff --git a/tokens/src/tokens/component/feedback/Icon/icon.json b/tokens/src/tokens/component/feedback/Icon/icon.json
@@ -55,116 +55,121 @@
         }
       },
       "color": {
-        "base": {
-          "value": "{alias.color.text.body.base.value}"
-        },
-        "inverse": {
-          "value": "{alias.color.text.body.inverse.value}"
-        },
-        "strong": {
-          "value": "{alias.color.text.body.strong.value}"
-        },
-        "stronger": {
-          "value": "{alias.color.text.body.stronger.value}"
-        },
-        "weak": {
-          "value": "{alias.color.text.body.weak.value}"
-        },
-        "weaker": {
-          "value": "{alias.color.text.body.weaker.value}"
-        },
-        "weakest": {
-          "value": "{alias.color.text.body.weakest.value}"
-        },
-        "success": {
-          "value": "{alias.color.text.feedback.success.base.value}"
-        },
-        "successWeak": {
-          "value": "{alias.color.text.feedback.success.weak.value}"
-        },
-        "successStrong": {
-          "value": "{alias.color.text.feedback.success.strong.value}"
-        },
-        "error": {
-          "value": "{alias.color.text.feedback.error.base.value}"
-        },
-        "errorWeak": {
-          "value": "{alias.color.text.feedback.error.weak.value}"
-        },
-        "errorStrong": {
-          "value": "{alias.color.text.feedback.error.strong.value}"
-        },
-        "warning": {
-          "value": "{alias.color.text.feedback.warning.base.value}"
-        },
-        "warningWeak": {
-          "value": "{alias.color.text.feedback.warning.weak.value}"
-        },
-        "warningStrong": {
-          "value": "{alias.color.text.feedback.warning.strong.value}"
-        },
-        "info": {
-          "value": "{alias.color.text.feedback.info.base.value}"
-        },
-        "infoWeak": {
-          "value": "{alias.color.text.feedback.info.weak.value}"
-        },
-        "infoStrong": {
-          "value": "{alias.color.text.feedback.info.strong.value}"
-        },
-        "help": {
-          "value": "{alias.color.text.feedback.help.base.value}"
-        },
-        "helpWeak": {
-          "value": "{alias.color.text.feedback.help.weak.value}"
-        },
-        "helpStrong": {
-          "value": "{alias.color.text.feedback.help.strong.value}"
-        },
-        "primary": {
-          "value": "{alias.color.text.feedback.primary.strong.value}"
-        },
-        "secondary": {
-          "value": "{alias.color.text.feedback.secondary.strong.value}"
-        },
-        "blendBase": {
-          "value": "{alias.color.text.feedback.blendBase.base.value}"
-        },
-        "blendInverse": {
-          "value": "{alias.color.text.feedback.blendInverse.base.value}"
-        },
-        "dataBlue": {
-          "value": "{alias.color.text.feedback.dataBlue.base.value}"
-        },
-        "dataBronze": {
-          "value": "{alias.color.text.feedback.dataBronze.base.value}"
-        },
-        "dataGreen": {
-          "value": "{alias.color.text.feedback.dataGreen.base.value}"
-        },
-        "dataTeal": {
-          "value": "{alias.color.text.feedback.dataTeal.base.value}"
-        },
-        "dataSky": {
-          "value": "{alias.color.text.feedback.dataSky.base.value}"
-        },
-        "dataSlate": {
-          "value": "{alias.color.text.feedback.dataSlate.base.value}"
-        },
-        "dataIndigo": {
-          "value": "{alias.color.text.feedback.dataIndigo.base.value}"
-        },
-        "dataDusk": {
-          "value": "{alias.color.text.feedback.dataDusk.base.value}"
-        },
-        "dataPurple": {
-          "value": "{alias.color.text.feedback.dataPurple.base.value}"
-        },
-        "dataMagenta": {
-          "value": "{alias.color.text.feedback.dataMagenta.base.value}"
-        },
-        "dataRed": {
-          "value": "{alias.color.text.feedback.dataRed.base.value}"
+        "fill": {
+          "base": {
+            "value": "{alias.color.text.body.base.value}"
+          },
+          "inverse": {
+            "value": "{alias.color.text.body.inverse.value}"
+          },
+          "strong": {
+            "value": "{alias.color.text.body.strong.value}"
+          },
+          "stronger": {
+            "value": "{alias.color.text.body.stronger.value}"
+          },
+          "weak": {
+            "value": "{alias.color.text.body.weak.value}"
+          },
+          "weaker": {
+            "value": "{alias.color.text.body.weaker.value}"
+          },
+          "weakest": {
+            "value": "{alias.color.text.body.weakest.value}"
+          },
+          "neutral": {
+            "value": "{alias.color.text.feedback.neutral.base.value}"
+          },
+          "success": {
+            "value": "{alias.color.text.feedback.success.base.value}"
+          },
+          "successWeak": {
+            "value": "{alias.color.text.feedback.success.weak.value}"
+          },
+          "successStrong": {
+            "value": "{alias.color.text.feedback.success.strong.value}"
+          },
+          "error": {
+            "value": "{alias.color.text.feedback.error.base.value}"
+          },
+          "errorWeak": {
+            "value": "{alias.color.text.feedback.error.weak.value}"
+          },
+          "errorStrong": {
+            "value": "{alias.color.text.feedback.error.strong.value}"
+          },
+          "warning": {
+            "value": "{alias.color.text.feedback.warning.base.value}"
+          },
+          "warningWeak": {
+            "value": "{alias.color.text.feedback.warning.weak.value}"
+          },
+          "warningStrong": {
+            "value": "{alias.color.text.feedback.warning.strong.value}"
+          },
+          "info": {
+            "value": "{alias.color.text.feedback.info.base.value}"
+          },
+          "infoWeak": {
+            "value": "{alias.color.text.feedback.info.weak.value}"
+          },
+          "infoStrong": {
+            "value": "{alias.color.text.feedback.info.strong.value}"
+          },
+          "help": {
+            "value": "{alias.color.text.feedback.help.base.value}"
+          },
+          "helpWeak": {
+            "value": "{alias.color.text.feedback.help.weak.value}"
+          },
+          "helpStrong": {
+            "value": "{alias.color.text.feedback.help.strong.value}"
+          },
+          "primary": {
+            "value": "{alias.color.text.feedback.primary.strong.value}"
+          },
+          "secondary": {
+            "value": "{alias.color.text.feedback.secondary.strong.value}"
+          },
+          "blendBase": {
+            "value": "{alias.color.text.feedback.blendBase.base.value}"
+          },
+          "blendInverse": {
+            "value": "{alias.color.text.feedback.blendInverse.base.value}"
+          },
+          "dataBlue": {
+            "value": "{alias.color.text.feedback.dataBlue.base.value}"
+          },
+          "dataBronze": {
+            "value": "{alias.color.text.feedback.dataBronze.base.value}"
+          },
+          "dataGreen": {
+            "value": "{alias.color.text.feedback.dataGreen.base.value}"
+          },
+          "dataTeal": {
+            "value": "{alias.color.text.feedback.dataTeal.base.value}"
+          },
+          "dataSky": {
+            "value": "{alias.color.text.feedback.dataSky.base.value}"
+          },
+          "dataSlate": {
+            "value": "{alias.color.text.feedback.dataSlate.base.value}"
+          },
+          "dataIndigo": {
+            "value": "{alias.color.text.feedback.dataIndigo.base.value}"
+          },
+          "dataDusk": {
+            "value": "{alias.color.text.feedback.dataDusk.base.value}"
+          },
+          "dataPurple": {
+            "value": "{alias.color.text.feedback.dataPurple.base.value}"
+          },
+          "dataMagenta": {
+            "value": "{alias.color.text.feedback.dataMagenta.base.value}"
+          },
+          "dataRed": {
+            "value": "{alias.color.text.feedback.dataRed.base.value}"
+          }
         }
       }
     }