@depersgroep/lfvp-design-tokens 0.382.0 → 0.384.0

package/tokens/brands/vtmgo.json

@@ -30,10 +30,6 @@
           "$type": "color",
           "$value": "#CC00AA"
         },
-        "45": {
-          "$type": "color",
-          "$value": "#D901B5"
-        },
         "50": {
           "$type": "color",
           "$value": "#FF01D5",
@@ -279,12 +275,6 @@
           "$type": "color",
           "$value": "rgba(16,4,24,0.95)"
         }
-      },
-      "various": {
-        "1": {
-          "$type": "color",
-          "$value": "#4B0B70"
-        }
       }
     }
   },
@@ -300,23 +290,23 @@
     "fontWeight": {
       "title": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.900}"
+        "$value": "{core.fontWeight.heavy}"
       },
       "default": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.400}"
+        "$value": "{core.fontWeight.regular}"
       },
       "emphasized": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.700}"
+        "$value": "{core.fontWeight.bold}"
       },
       "bold": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.700}"
+        "$value": "{core.fontWeight.bold}"
       },
       "button": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.700}"
+        "$value": "{core.fontWeight.bold}"
       }
     },
     "typography": {
@@ -392,10 +382,6 @@
         "$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}"
@@ -553,16 +539,6 @@
           "$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": {
@@ -613,35 +589,35 @@
       "interaction": {
         "normal": {
           "$type": "color",
-          "$value": "{core.color.neutrals.100}"
+          "$value": "{core.color.primary.50}"
         },
         "onNormal": {
           "$type": "color",
-          "$value": "{core.color.neutrals.5}"
+          "$value": "{base.color.text.default}"
         },
         "hover": {
           "$type": "color",
-          "$value": "{core.color.neutrals.80}"
+          "$value": "{core.color.primary.40}"
         },
         "onHover": {
           "$type": "color",
-          "$value": "{core.color.neutrals.5}"
+          "$value": "{base.color.text.default}"
         },
         "active": {
           "$type": "color",
-          "$value": "{core.color.neutrals.80}"
+          "$value": "{core.color.primary.30}"
         },
         "onActive": {
           "$type": "color",
-          "$value": "{core.color.neutrals.5}"
+          "$value": "{base.color.text.default}"
         },
         "focus": {
           "$type": "color",
-          "$value": "{core.color.neutrals.100}"
+          "$value": "{core.color.primary.40}"
         },
         "onFocus": {
           "$type": "color",
-          "$value": "{core.color.neutrals.5}"
+          "$value": "{base.color.text.default}"
         },
         "disabled": {
           "$type": "color",
@@ -693,48 +669,6 @@
           "$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,10 +30,6 @@
           "$type": "color",
           "$value": "#2D22AA"
         },
-        "45": {
-          "$type": "color",
-          "$value": "#2D22AA"
-        },
         "50": {
           "$type": "color",
           "$value": "#382AD5",
@@ -279,12 +275,6 @@
           "$type": "color",
           "$value": "rgba(0,0,0,0.95)"
         }
-      },
-      "various": {
-        "1": {
-          "$type": "color",
-          "$value": "#ffffff"
-        }
       }
     }
   },
@@ -300,23 +290,23 @@
     "fontWeight": {
       "title": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.900}"
+        "$value": "{core.fontWeight.extraBold}"
       },
       "default": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.400}"
+        "$value": "{core.fontWeight.regular}"
       },
       "emphasized": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.700}"
+        "$value": "{core.fontWeight.regular}"
       },
       "bold": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.900}"
+        "$value": "{core.fontWeight.bold}"
       },
       "button": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.900}"
+        "$value": "{base.fontWeight.bold}"
       }
     },
     "typography": {
@@ -392,10 +382,6 @@
         "$type": "borderRadius",
         "$value": "{core.borderRadius.4}"
       },
-      "badge": {
-        "$type": "borderRadius",
-        "$value": "{core.borderRadius.4}"
-      },
       "pill": {
         "$type": "borderRadius",
         "$value": "{base.ui.borderRadius.flex.br2}"
@@ -553,16 +539,6 @@
           "$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": {
@@ -617,7 +593,7 @@
         },
         "onNormal": {
           "$type": "color",
-          "$value": "{core.color.neutrals.100}"
+          "$value": "{base.color.text.default}"
         },
         "hover": {
           "$type": "color",
@@ -625,7 +601,7 @@
         },
         "onHover": {
           "$type": "color",
-          "$value": "{core.color.neutrals.100}"
+          "$value": "{base.color.text.default}"
         },
         "active": {
           "$type": "color",
@@ -633,7 +609,7 @@
         },
         "onActive": {
           "$type": "color",
-          "$value": "{core.color.neutrals.100}"
+          "$value": "{base.color.text.default}"
         },
         "focus": {
           "$type": "color",
@@ -641,7 +617,7 @@
         },
         "onFocus": {
           "$type": "color",
-          "$value": "{core.color.neutrals.100}"
+          "$value": "{base.color.text.default}"
         },
         "disabled": {
           "$type": "color",
@@ -693,48 +669,6 @@
           "$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/box.json

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

package/tokens/components/button.json

@@ -16,10 +16,6 @@
       "focusColor": {
         "$type": "color",
         "$value": "{base.color.functional.focus}"
-      },
-      "progressColor": {
-        "$type": "color",
-        "$value": "{base.color.ui.fade3}"
       }
     },
     "small": {
@@ -112,7 +108,7 @@
       "normal": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.50}"
+          "$value": "{core.color.softAlpha.60}"
         },
         "textColor": {
           "$type": "color",
@@ -122,7 +118,7 @@
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.40}"
+          "$value": "{core.color.softAlpha.70}"
         },
         "textColor": {
           "$type": "color",
@@ -132,7 +128,7 @@
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.30}"
+          "$value": "{core.color.softAlpha.80}"
         },
         "textColor": {
           "$type": "color",
@@ -155,12 +151,12 @@
       },
       "textShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.0}"
+        "$value": "{core.boxShadow.1}"
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.50}"
+          "$value": "{core.color.softAlpha.70}"
         },
         "textColor": {
           "$type": "color",
@@ -215,12 +211,12 @@
       },
       "textShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.0}"
+        "$value": "{core.boxShadow.1}"
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.neutrals.15}"
+          "$value": "{core.color.neutrals.20}"
         },
         "textColor": {
           "$type": "color",
@@ -271,11 +267,11 @@
       },
       "boxShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.0}"
+        "$value": "{core.boxShadow.2}"
       },
       "textShadow": {
         "$type": "boxShadow",
-        "$value": "{core.boxShadow.0}"
+        "$value": "{core.boxShadow.1}"
       },
       "focus": {
         "backgroundColor": {
@@ -474,66 +470,6 @@
         "$type": "fontSizes",
         "$value": "{core.fontSize.14}"
       }
-    },
-    "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}"
-      }
     }
   },
   "iconButton": {

package/tokens/components/chapter-swimlane.json

@@ -0,0 +1,8 @@
+{
+  "chapterSwimlane": {
+    "overlayColor": {
+      "$type": "color",
+      "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.80} 50%, {core.color.darkAlpha.20} 100%)"
+    }
+  }
+}

package/tokens/components/detail-header.json

@@ -1,25 +1,12 @@
 {
   "detailHeader": {
-    "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}"
-        }
+    "title": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{base.heroFont}",
+        "fontWeight": "{base.fontWeight.title}",
+        "lineHeight": "{core.lineHeight.120}",
+        "fontSize": "{core.fontSize.24}*{scale.title}"
       }
     }
   }

package/tokens/components/input.json

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

package/tokens/components/navigation.json

@@ -178,20 +178,6 @@
           "$type": "color",
           "$value": "{core.color.lightAlpha.70}"
         }
-      },
-      "focus": {
-        "iconColor": {
-          "$type": "color",
-          "$value": "{base.colorSet.interaction.onNormal}"
-        },
-        "backgroundColor": {
-          "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
-        },
-        "textColor": {
-          "$type": "color",
-          "$value": "{base.color.ui.white}"
-        }
       }
     },
     "sideNavigation": {
@@ -259,18 +245,6 @@
     "iconColor": {
       "$type": "color",
       "$value": "{base.color.titleBar.iconColor}"
-    },
-    "alpha1": {
-      "$type": "color",
-      "$value": "{core.color.darkAlpha.95}"
-    },
-    "alpha2": {
-      "$type": "color",
-      "$value": "{core.color.darkAlpha.90}"
-    },
-    "alpha3": {
-      "$type": "color",
-      "$value": "{core.color.darkAlpha.70}"
     }
   },
   "topNavigationLogo": {