@depersgroep/lfvp-design-tokens 0.384.0 → 0.386.0

package/tokens/brands/vtmgo.json

@@ -30,6 +30,10 @@
           "$type": "color",
           "$value": "#CC00AA"
         },
+        "45": {
+          "$type": "color",
+          "$value": "#D901B5"
+        },
         "50": {
           "$type": "color",
           "$value": "#FF01D5",
@@ -275,6 +279,12 @@
           "$type": "color",
           "$value": "rgba(16,4,24,0.95)"
         }
+      },
+      "various": {
+        "1": {
+          "$type": "color",
+          "$value": "#4B0B70"
+        }
       }
     }
   },
@@ -290,23 +300,23 @@
     "fontWeight": {
       "title": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.heavy}"
+        "$value": "{core.fontWeight.900}"
       },
       "default": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.regular}"
+        "$value": "{core.fontWeight.400}"
       },
       "emphasized": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.bold}"
+        "$value": "{core.fontWeight.700}"
       },
       "bold": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.bold}"
+        "$value": "{core.fontWeight.700}"
       },
       "button": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.bold}"
+        "$value": "{core.fontWeight.700}"
       }
     },
     "typography": {
@@ -382,6 +392,10 @@
         "$type": "borderRadius",
         "$value": "{base.ui.borderRadius.flex.br4}"
       },
+      "badge": {
+        "$type": "borderRadius",
+        "$value": "{badge.small.fontSize}/3"
+      },
       "pill": {
         "$type": "borderRadius",
         "$value": "{base.ui.borderRadius.flex.br4}"
@@ -539,6 +553,16 @@
           "$type": "color",
           "$value": "{base.colorSet.neutrals.dark4}"
         }
+      },
+      "badge": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.50}"
+        }
       }
     },
     "sizing": {
@@ -589,35 +613,35 @@
       "interaction": {
         "normal": {
           "$type": "color",
-          "$value": "{core.color.primary.50}"
+          "$value": "{core.color.neutrals.100}"
         },
         "onNormal": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "hover": {
           "$type": "color",
-          "$value": "{core.color.primary.40}"
+          "$value": "{core.color.neutrals.80}"
         },
         "onHover": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "active": {
           "$type": "color",
-          "$value": "{core.color.primary.30}"
+          "$value": "{core.color.neutrals.80}"
         },
         "onActive": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "focus": {
           "$type": "color",
-          "$value": "{core.color.primary.40}"
+          "$value": "{core.color.neutrals.100}"
         },
         "onFocus": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "disabled": {
           "$type": "color",
@@ -669,6 +693,48 @@
           "$type": "color",
           "$value": "{core.color.neutrals.20}"
         }
+      },
+      "branded": {
+        "normal": {
+          "$type": "color",
+          "$value": "linear-gradient(60deg, {core.color.various.1} 0%, {core.color.primary.45} 100%)"
+        },
+        "onNormal": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "linear-gradient(60deg, {core.color.various.1} 0%, {core.color.primary.30} 100%)"
+        },
+        "onHover": {
+          "$type": "color",
+          "$value": "{core.color.primary.95}"
+        },
+        "active": {
+          "$type": "color",
+          "$value": "linear-gradient(60deg, {core.color.various.1} 0%, {core.color.primary.30} 100%)"
+        },
+        "onActive": {
+          "$type": "color",
+          "$value": "{core.color.primary.95}"
+        },
+        "focus": {
+          "$type": "color",
+          "$value": "linear-gradient(60deg, {core.color.various.1} 0%, {core.color.primary.45} 100%)"
+        },
+        "onFocus": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.20}"
+        },
+        "onDisabled": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.60}"
+        }
       }
     },
     "plan": {

package/tokens/brands/whitelabel.json

@@ -30,6 +30,10 @@
           "$type": "color",
           "$value": "#2D22AA"
         },
+        "45": {
+          "$type": "color",
+          "$value": "#2D22AA"
+        },
         "50": {
           "$type": "color",
           "$value": "#382AD5",
@@ -275,6 +279,12 @@
           "$type": "color",
           "$value": "rgba(0,0,0,0.95)"
         }
+      },
+      "various": {
+        "1": {
+          "$type": "color",
+          "$value": "#ffffff"
+        }
       }
     }
   },
@@ -290,23 +300,23 @@
     "fontWeight": {
       "title": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.extraBold}"
+        "$value": "{core.fontWeight.900}"
       },
       "default": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.regular}"
+        "$value": "{core.fontWeight.400}"
       },
       "emphasized": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.regular}"
+        "$value": "{core.fontWeight.700}"
       },
       "bold": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.bold}"
+        "$value": "{core.fontWeight.900}"
       },
       "button": {
         "$type": "fontWeights",
-        "$value": "{base.fontWeight.bold}"
+        "$value": "{core.fontWeight.900}"
       }
     },
     "typography": {
@@ -382,6 +392,10 @@
         "$type": "borderRadius",
         "$value": "{core.borderRadius.4}"
       },
+      "badge": {
+        "$type": "borderRadius",
+        "$value": "{core.borderRadius.4}"
+      },
       "pill": {
         "$type": "borderRadius",
         "$value": "{base.ui.borderRadius.flex.br2}"
@@ -539,6 +553,16 @@
           "$type": "color",
           "$value": "{base.colorSet.neutrals.dark2}"
         }
+      },
+      "badge": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.45}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.45}"
+        }
       }
     },
     "sizing": {
@@ -593,7 +617,7 @@
         },
         "onNormal": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "hover": {
           "$type": "color",
@@ -601,7 +625,7 @@
         },
         "onHover": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "active": {
           "$type": "color",
@@ -609,7 +633,7 @@
         },
         "onActive": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "focus": {
           "$type": "color",
@@ -617,7 +641,7 @@
         },
         "onFocus": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "disabled": {
           "$type": "color",
@@ -669,6 +693,48 @@
           "$type": "color",
           "$value": "{core.color.neutrals.10}"
         }
+      },
+      "branded": {
+        "normal": {
+          "$type": "color",
+          "$value": "{core.color.primary.50}"
+        },
+        "onNormal": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "onHover": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "active": {
+          "$type": "color",
+          "$value": "{core.color.primary.30}"
+        },
+        "onActive": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "focus": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "onFocus": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.20}"
+        },
+        "onDisabled": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.60}"
+        }
       }
     },
     "plan": {

package/tokens/components/badge.json

@@ -0,0 +1,108 @@
+{
+  "badge": {
+    "small": {
+      "label": {
+        "$type": "typography",
+        "$value": "{base.typography.meta.bold}"
+      },
+      "horizontalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/2.5"
+      },
+      "gap": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/3"
+      },
+      "margin": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/3"
+      },
+      "verticalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/6"
+      },
+      "borderRadius": {
+        "$type": "borderRadius",
+        "$value": "{base.borderRadius.badge}"
+      },
+      "iconSize": {
+        "$type": "sizing",
+        "$value": "{badge.small.fontSize}*1.4"
+      },
+      "fontSize": {
+        "$type": "fontSizes",
+        "$value": "{core.fontSize.12}*{scale.text}"
+      },
+      "height": {
+        "$type": "sizing",
+        "$value": "{badge.small.fontSize}*1.8"
+      }
+    },
+    "medium": {
+      "label": {
+        "$type": "typography",
+        "$value": "{base.typography.text.bold.xSmall}"
+      },
+      "horizontalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/2.5"
+      },
+      "gap": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/2"
+      },
+      "margin": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "verticalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "borderRadius": {
+        "$type": "borderRadius",
+        "$value": "{base.borderRadius.badge}"
+      },
+      "iconSize": {
+        "$type": "sizing",
+        "$value": "{badge.medium.fontSize}*1.4"
+      },
+      "height": {
+        "$type": "sizing",
+        "$value": "{badge.medium.fontSize}*2.1"
+      },
+      "fontSize": {
+        "$type": "fontSizes",
+        "$value": "{core.fontSize.13}*{scale.text}"
+      }
+    },
+    "default": {
+      "backgroundColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.fade4}"
+      },
+      "iconColor": {
+        "$type": "color",
+        "$value": "{base.color.badge.iconColor}"
+      },
+      "textColor": {
+        "$type": "color",
+        "$value": "{base.color.text.default}"
+      }
+    },
+    "highlight": {
+      "backgroundColor": {
+        "$type": "color",
+        "$value": "{base.color.badge.backgroundColor}"
+      },
+      "iconColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.white}"
+      },
+      "textColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.white}"
+      }
+    }
+  }
+}

package/tokens/components/box.json

@@ -50,12 +50,12 @@
   "boxHeading": {
     "verticalPadding": {
       "$type": "spacing",
-      "$value": "{core.spacing.4}"
+      "$value": "{base.ui.spacing.flex.sp1}"
     },
     "default": {
       "backgroundColor": {
         "$type": "color",
-        "$value": "{base.color.ui.dark3}"
+        "$value": "{base.color.ui.accent1}"
       },
       "textColor": {
         "$type": "color",
@@ -74,12 +74,7 @@
     },
     "text": {
       "$type": "typography",
-      "$value": {
-        "fontFamily": "{button.default.fontFamily}",
-        "fontWeight": "{base.fontWeight.bold}",
-        "fontSize": "{button.medium.fontSize}",
-        "lineHeight": "{button.default.lineHeight}"
-      }
+      "$value": "{base.typography.text.bold.small}"
     }
   }
 }

package/tokens/components/button.json

@@ -16,6 +16,10 @@
       "focusColor": {
         "$type": "color",
         "$value": "{base.color.functional.focus}"
+      },
+      "progressColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.fade3}"
       }
     },
     "small": {
@@ -108,7 +112,7 @@
       "normal": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.60}"
+          "$value": "{core.color.softAlpha.50}"
         },
         "textColor": {
           "$type": "color",
@@ -118,7 +122,7 @@
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.70}"
+          "$value": "{core.color.softAlpha.40}"
         },
         "textColor": {
           "$type": "color",
@@ -128,7 +132,7 @@
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.80}"
+          "$value": "{core.color.softAlpha.30}"
         },
         "textColor": {
           "$type": "color",
@@ -151,12 +155,12 @@
       },
       "textShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.1}"
+        "$value": "{core.boxShadow.0}"
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.70}"
+          "$value": "{core.color.softAlpha.50}"
         },
         "textColor": {
           "$type": "color",
@@ -211,12 +215,12 @@
       },
       "textShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.1}"
+        "$value": "{core.boxShadow.0}"
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.neutrals.20}"
+          "$value": "{core.color.neutrals.15}"
         },
         "textColor": {
           "$type": "color",
@@ -267,11 +271,11 @@
       },
       "boxShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.2}"
+        "$value": "{core.boxShadow.0}"
       },
       "textShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.1}"
+        "$value": "{core.boxShadow.0}"
       },
       "focus": {
         "backgroundColor": {
@@ -443,7 +447,7 @@
       },
       "horizontalPadding": {
         "$type": "spacing",
-        "$value": "{button.small.fontSize}*0.75"
+        "$value": "{button.small.fontSize}*0.25"
       },
       "verticalPadding": {
         "$type": "spacing",
@@ -451,7 +455,7 @@
       },
       "gap": {
         "$type": "spacing",
-        "$value": "{button.small.fontSize}*0.25"
+        "$value": "{button.small.fontSize}*0.20"
       },
       "borderRadius": {
         "$type": "borderRadius",
@@ -468,7 +472,67 @@
       },
       "fontSize": {
         "$type": "fontSizes",
-        "$value": "{core.fontSize.14}"
+        "$value": "{core.fontSize.12}"
+      }
+    },
+    "branded": {
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.onNormal}"
+        }
+      },
+      "hover": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.hover}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.onHover}"
+        }
+      },
+      "active": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.active}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.onActive}"
+        }
+      },
+      "disabled": {
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.onDisabled}"
+        },
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.disabled}"
+        }
+      },
+      "focus": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.focus}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.branded.onFocus}"
+        }
+      },
+      "boxShadow": {
+        "$type": "boxShadow",
+        "$value": "{core.boxShadow.0}"
+      },
+      "textShadow": {
+        "$type": "boxShadow",
+        "$value": "{core.boxShadow.0}"
       }
     }
   },

package/tokens/components/detail-header.json

@@ -1,12 +1,25 @@
 {
   "detailHeader": {
-    "title": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{base.heroFont}",
-        "fontWeight": "{base.fontWeight.title}",
-        "lineHeight": "{core.lineHeight.120}",
-        "fontSize": "{core.fontSize.24}*{scale.title}"
+    "level1": {
+      "title": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{base.heroFont}",
+          "fontWeight": "{base.fontWeight.title}",
+          "lineHeight": "{core.lineHeight.120}",
+          "fontSize": "{core.fontSize.24}*{scale.title}"
+        }
+      }
+    },
+    "level2": {
+      "title": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{base.heroFont}",
+          "fontWeight": "{base.fontWeight.title}",
+          "lineHeight": "{core.lineHeight.120}",
+          "fontSize": "{core.fontSize.20}*{scale.title}"
+        }
       }
     }
   }

package/tokens/components/input.json

@@ -100,10 +100,6 @@
       "borderWidth": {
         "$type": "borderWidth",
         "$value": "{base.ui.borderWidth.fixed.bw3}"
-      },
-      "borderWidth-copy": {
-        "$type": "borderWidth",
-        "$value": "{base.ui.borderWidth.fixed.bw3}"
       }
     },
     "padding": {