From b64cbae3b427e7f2be01b00044e575c3513262e7 Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Tue, 16 Jun 2026 10:26:56 +0100 Subject: [PATCH 1/2] add new token --- packages/tokens/dist/css/base.css | 1 + packages/tokens/dist/json/all-tokens.json | 10 ++++++++++ packages/tokens/dist/json/semantic.json | 10 ++++++++++ packages/tokens/dist/manifest.json | 14 ++++++++++++++ packages/tokens/dist/tailwind/tailwind.config.js | 2 +- packages/tokens/dist/themes/themes.module.css | 1 + 6 files changed, 37 insertions(+), 1 deletion(-) diff --git a/packages/tokens/dist/css/base.css b/packages/tokens/dist/css/base.css index 2062ba29dc..e85a82c492 100644 --- a/packages/tokens/dist/css/base.css +++ b/packages/tokens/dist/css/base.css @@ -3,6 +3,7 @@ --border-radius-medium: 0.25rem; --border-radius-small: 0.125rem; --border-radius-x-large: 0.75rem; + --border-radius-xx-large: 1rem; --border-width-default: 1px; --border-width-large: 2px; --color-charts-dim-default: rgba(248, 248, 245, 1); diff --git a/packages/tokens/dist/json/all-tokens.json b/packages/tokens/dist/json/all-tokens.json index 7f8d81339c..47791fd1a3 100644 --- a/packages/tokens/dist/json/all-tokens.json +++ b/packages/tokens/dist/json/all-tokens.json @@ -969,6 +969,16 @@ "border-radius", "x-large" ] + }, + "xx-large": { + "name": "border-radius-xx-large", + "type": "float", + "value": "var(--border-radius-xx-large)", + "path": [ + "default", + "border-radius", + "xx-large" + ] } }, "border-width": { diff --git a/packages/tokens/dist/json/semantic.json b/packages/tokens/dist/json/semantic.json index b241b57c5b..9ac07d75a3 100644 --- a/packages/tokens/dist/json/semantic.json +++ b/packages/tokens/dist/json/semantic.json @@ -39,6 +39,16 @@ "border-radius", "x-large" ] + }, + "xx-large": { + "name": "border-radius-xx-large", + "type": "float", + "value": "var(--border-radius-xx-large)", + "path": [ + "default", + "border-radius", + "xx-large" + ] } }, "border-width": { diff --git a/packages/tokens/dist/manifest.json b/packages/tokens/dist/manifest.json index b0ad84ea5b..72c89ff3e7 100644 --- a/packages/tokens/dist/manifest.json +++ b/packages/tokens/dist/manifest.json @@ -1158,6 +1158,20 @@ "type": "float", "value": "var(--border-radius-x-large)" }, + { + "category": "semantic", + "cssVariable": "var(--border-radius-xx-large)", + "id": "border-radius-xx-large", + "keyPath": [ + "semantic", + "border-radius", + "xx-large" + ], + "tailwindClass": "rounded-xx-large", + "themeable": false, + "type": "float", + "value": "var(--border-radius-xx-large)" + }, { "category": "semantic", "cssVariable": "var(--border-width-default)", diff --git a/packages/tokens/dist/tailwind/tailwind.config.js b/packages/tokens/dist/tailwind/tailwind.config.js index 7d2166678a..06df13fbc6 100644 --- a/packages/tokens/dist/tailwind/tailwind.config.js +++ b/packages/tokens/dist/tailwind/tailwind.config.js @@ -1,7 +1,7 @@ import plugin from 'tailwindcss/plugin'; export default { - theme: {"colors":{"charts":{"dim":{"DEFAULT":"var(--color-charts-dim-default)"},"missing":{"DEFAULT":"var(--color-charts-missing-default)"},"negative":{"DEFAULT":"var(--color-charts-negative-default)","hover":"var(--color-charts-negative-hover)","subtle":"var(--color-charts-negative-subtle)"},"primary":{"DEFAULT":"var(--color-charts-primary-default)","hover":"var(--color-charts-primary-hover)","subtle":"var(--color-charts-primary-subtle)"},"secondary":{"DEFAULT":"var(--color-charts-secondary-default)","hover":"var(--color-charts-secondary-hover)","subtle":"var(--color-charts-secondary-subtle)"},"tertiary":{"DEFAULT":"var(--color-charts-tertiary-default)","hover":"var(--color-charts-tertiary-hover)","subtle":"var(--color-charts-tertiary-subtle)"}},"container":{"disabled":{"DEFAULT":"var(--color-container-disabled-default)","on-disabled-container":"var(--color-container-disabled-on-disabled-container)"},"error":{"active":"var(--color-container-error-active)","DEFAULT":"var(--color-container-error-default)","hover":"var(--color-container-error-hover)","on-error-container":"var(--color-container-error-on-error-container)"},"highlight":{"active":"var(--color-container-highlight-active)","DEFAULT":"var(--color-container-highlight-default)","hover":"var(--color-container-highlight-hover)","on-highlight-container":"var(--color-container-highlight-on-highlight-container)"},"secondary":{"active":"var(--color-container-secondary-active)","DEFAULT":"var(--color-container-secondary-default)","hover":"var(--color-container-secondary-hover)","on-secondary-container":"var(--color-container-secondary-on-secondary-container)","on-secondary-container-variant":"var(--color-container-secondary-on-secondary-container-variant)"},"success":{"active":"var(--color-container-success-active)","DEFAULT":"var(--color-container-success-default)","hover":"var(--color-container-success-hover)","on-success-container":"var(--color-container-success-on-success-container)"},"warning":{"active":"var(--color-container-warning-active)","DEFAULT":"var(--color-container-warning-default)","hover":"var(--color-container-warning-hover)","on-warning-container":"var(--color-container-warning-on-warning-container)"}},"disabled":{"DEFAULT":"var(--color-disabled-default)","on-disabled":"var(--color-disabled-on-disabled)"},"error":{"active":"var(--color-error-active)","DEFAULT":"var(--color-error-default)","hover":"var(--color-error-hover)","on-error":"var(--color-error-on-error)"},"focus":{"contrast":"var(--color-focus-contrast)","DEFAULT":"var(--color-focus-default)"},"highlight":{"active":"var(--color-highlight-active)","DEFAULT":"var(--color-highlight-default)","hover":"var(--color-highlight-hover)","on-highlight":"var(--color-highlight-on-highlight)"},"line":{"mid":"var(--color-line-mid)","strong":"var(--color-line-strong)","subtle":"var(--color-line-subtle)"},"low-contrast":{"DEFAULT":"var(--color-low-contrast-default)"},"overlay":{"DEFAULT":"var(--color-overlay-default)"},"primary":{"active":"var(--color-primary-active)","DEFAULT":"var(--color-primary-default)","hover":"var(--color-primary-hover)","on-primary":"var(--color-primary-on-primary)","on-primary-variant":"var(--color-primary-on-primary-variant)"},"secondary":{"active":"var(--color-secondary-active)","DEFAULT":"var(--color-secondary-default)","hover":"var(--color-secondary-hover)","on-secondary":"var(--color-secondary-on-secondary)"},"shadow":{"DEFAULT":"var(--color-shadow-default)"},"success":{"active":"var(--color-success-active)","DEFAULT":"var(--color-success-default)","hover":"var(--color-success-hover)","on-success":"var(--color-success-on-success)"},"surface":{"active":"var(--color-surface-active)","DEFAULT":"var(--color-surface-default)","dim":"var(--color-surface-dim)","hover":"var(--color-surface-hover)"},"warning":{"active":"var(--color-warning-active)","DEFAULT":"var(--color-warning-default)","hover":"var(--color-warning-hover)","on-warning":"var(--color-warning-on-warning)"},"inherit":"inherit","current":"currentColor","transparent":"transparent"},"fontSize":{"large":"var(--typography-font-size-large)","medium":"var(--typography-font-size-medium)","small":"var(--typography-font-size-small)","x-large":"var(--typography-font-size-x-large)","x-small":"var(--typography-font-size-x-small)","xx-large":"var(--typography-font-size-xx-large)","xx-small":"var(--typography-font-size-xx-small)"},"fontWeight":{"bold":"var(--typography-font-weight-bold)","medium":"var(--typography-font-weight-medium)","regular":"var(--typography-font-weight-regular)"},"fontFamily":{"monospace":"var(--typography-font-family-monospace)","primary":"var(--typography-font-family-primary)"},"letterSpacing":{"DEFAULT":"var(--typography-letter-spacing-default)","wide":"var(--typography-letter-spacing-wide)"},"lineHeight":{"extra-loose":"var(--typography-line-height-extra-loose)","loose":"var(--typography-line-height-loose)","medium":"var(--typography-line-height-medium)","tight":"var(--typography-line-height-tight)","wide":"var(--typography-line-height-wide)"},"borderRadius":{"large":"var(--border-radius-large)","medium":"var(--border-radius-medium)","small":"var(--border-radius-small)","x-large":"var(--border-radius-x-large)","DEFAULT":"var(--border-radius-medium)","full":"9999px"},"borderWidth":{"DEFAULT":"var(--border-width-default)","large":"var(--border-width-large)"},"outlineColor":{"DEFAULT":"var(--color-focus-default)"},"outlineWidth":{"DEFAULT":"4px"},"outlineOffset":{"DEFAULT":"2px"},"boxShadow":{"big":"var(--shadow-big)","DEFAULT":"var(--shadow-default)","mid":"var(--shadow-mid)"},"extend":{"spacing":{"large":"var(--spacing-large)","medium":"var(--spacing-medium)","small":"var(--spacing-small)","x-large":"var(--spacing-x-large)","x-small":"var(--spacing-x-small)","xx-large":"var(--spacing-xx-large)","xx-small":"var(--spacing-xx-small)"}}}, + theme: {"colors":{"charts":{"dim":{"DEFAULT":"var(--color-charts-dim-default)"},"missing":{"DEFAULT":"var(--color-charts-missing-default)"},"negative":{"DEFAULT":"var(--color-charts-negative-default)","hover":"var(--color-charts-negative-hover)","subtle":"var(--color-charts-negative-subtle)"},"primary":{"DEFAULT":"var(--color-charts-primary-default)","hover":"var(--color-charts-primary-hover)","subtle":"var(--color-charts-primary-subtle)"},"secondary":{"DEFAULT":"var(--color-charts-secondary-default)","hover":"var(--color-charts-secondary-hover)","subtle":"var(--color-charts-secondary-subtle)"},"tertiary":{"DEFAULT":"var(--color-charts-tertiary-default)","hover":"var(--color-charts-tertiary-hover)","subtle":"var(--color-charts-tertiary-subtle)"}},"container":{"disabled":{"DEFAULT":"var(--color-container-disabled-default)","on-disabled-container":"var(--color-container-disabled-on-disabled-container)"},"error":{"active":"var(--color-container-error-active)","DEFAULT":"var(--color-container-error-default)","hover":"var(--color-container-error-hover)","on-error-container":"var(--color-container-error-on-error-container)"},"highlight":{"active":"var(--color-container-highlight-active)","DEFAULT":"var(--color-container-highlight-default)","hover":"var(--color-container-highlight-hover)","on-highlight-container":"var(--color-container-highlight-on-highlight-container)"},"secondary":{"active":"var(--color-container-secondary-active)","DEFAULT":"var(--color-container-secondary-default)","hover":"var(--color-container-secondary-hover)","on-secondary-container":"var(--color-container-secondary-on-secondary-container)","on-secondary-container-variant":"var(--color-container-secondary-on-secondary-container-variant)"},"success":{"active":"var(--color-container-success-active)","DEFAULT":"var(--color-container-success-default)","hover":"var(--color-container-success-hover)","on-success-container":"var(--color-container-success-on-success-container)"},"warning":{"active":"var(--color-container-warning-active)","DEFAULT":"var(--color-container-warning-default)","hover":"var(--color-container-warning-hover)","on-warning-container":"var(--color-container-warning-on-warning-container)"}},"disabled":{"DEFAULT":"var(--color-disabled-default)","on-disabled":"var(--color-disabled-on-disabled)"},"error":{"active":"var(--color-error-active)","DEFAULT":"var(--color-error-default)","hover":"var(--color-error-hover)","on-error":"var(--color-error-on-error)"},"focus":{"contrast":"var(--color-focus-contrast)","DEFAULT":"var(--color-focus-default)"},"highlight":{"active":"var(--color-highlight-active)","DEFAULT":"var(--color-highlight-default)","hover":"var(--color-highlight-hover)","on-highlight":"var(--color-highlight-on-highlight)"},"line":{"mid":"var(--color-line-mid)","strong":"var(--color-line-strong)","subtle":"var(--color-line-subtle)"},"low-contrast":{"DEFAULT":"var(--color-low-contrast-default)"},"overlay":{"DEFAULT":"var(--color-overlay-default)"},"primary":{"active":"var(--color-primary-active)","DEFAULT":"var(--color-primary-default)","hover":"var(--color-primary-hover)","on-primary":"var(--color-primary-on-primary)","on-primary-variant":"var(--color-primary-on-primary-variant)"},"secondary":{"active":"var(--color-secondary-active)","DEFAULT":"var(--color-secondary-default)","hover":"var(--color-secondary-hover)","on-secondary":"var(--color-secondary-on-secondary)"},"shadow":{"DEFAULT":"var(--color-shadow-default)"},"success":{"active":"var(--color-success-active)","DEFAULT":"var(--color-success-default)","hover":"var(--color-success-hover)","on-success":"var(--color-success-on-success)"},"surface":{"active":"var(--color-surface-active)","DEFAULT":"var(--color-surface-default)","dim":"var(--color-surface-dim)","hover":"var(--color-surface-hover)"},"warning":{"active":"var(--color-warning-active)","DEFAULT":"var(--color-warning-default)","hover":"var(--color-warning-hover)","on-warning":"var(--color-warning-on-warning)"},"inherit":"inherit","current":"currentColor","transparent":"transparent"},"fontSize":{"large":"var(--typography-font-size-large)","medium":"var(--typography-font-size-medium)","small":"var(--typography-font-size-small)","x-large":"var(--typography-font-size-x-large)","x-small":"var(--typography-font-size-x-small)","xx-large":"var(--typography-font-size-xx-large)","xx-small":"var(--typography-font-size-xx-small)"},"fontWeight":{"bold":"var(--typography-font-weight-bold)","medium":"var(--typography-font-weight-medium)","regular":"var(--typography-font-weight-regular)"},"fontFamily":{"monospace":"var(--typography-font-family-monospace)","primary":"var(--typography-font-family-primary)"},"letterSpacing":{"DEFAULT":"var(--typography-letter-spacing-default)","wide":"var(--typography-letter-spacing-wide)"},"lineHeight":{"extra-loose":"var(--typography-line-height-extra-loose)","loose":"var(--typography-line-height-loose)","medium":"var(--typography-line-height-medium)","tight":"var(--typography-line-height-tight)","wide":"var(--typography-line-height-wide)"},"borderRadius":{"large":"var(--border-radius-large)","medium":"var(--border-radius-medium)","small":"var(--border-radius-small)","x-large":"var(--border-radius-x-large)","xx-large":"var(--border-radius-xx-large)","DEFAULT":"var(--border-radius-medium)","full":"9999px"},"borderWidth":{"DEFAULT":"var(--border-width-default)","large":"var(--border-width-large)"},"outlineColor":{"DEFAULT":"var(--color-focus-default)"},"outlineWidth":{"DEFAULT":"4px"},"outlineOffset":{"DEFAULT":"2px"},"boxShadow":{"big":"var(--shadow-big)","DEFAULT":"var(--shadow-default)","mid":"var(--shadow-mid)"},"extend":{"spacing":{"large":"var(--spacing-large)","medium":"var(--spacing-medium)","small":"var(--spacing-small)","x-large":"var(--spacing-x-large)","x-small":"var(--spacing-x-small)","xx-large":"var(--spacing-xx-large)","xx-small":"var(--spacing-xx-small)"}}}, plugins: [plugin(function({ addUtilities }) { addUtilities({ '.body-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-large-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-medium': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-medium-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-medium-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-small': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-small-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-small-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-category': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-uppercase)", letterSpacing: "var(--typography-letter-spacing-wide)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-category-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-uppercase)", letterSpacing: "var(--typography-letter-spacing-wide)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.heading-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.heading-medium': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-medium-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-x-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-loose)" }, '.heading-x-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-loose)" }, '.heading-xx-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-extra-loose)" }, '.heading-xx-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-extra-loose)" }, diff --git a/packages/tokens/dist/themes/themes.module.css b/packages/tokens/dist/themes/themes.module.css index 0ac4932800..5ea70b9b73 100644 --- a/packages/tokens/dist/themes/themes.module.css +++ b/packages/tokens/dist/themes/themes.module.css @@ -3,6 +3,7 @@ --border-radius-medium: 0.25rem; --border-radius-small: 0.125rem; --border-radius-x-large: 0.75rem; + --border-radius-xx-large: 1rem; --border-width-default: 1px; --border-width-large: 2px; --color-error-00: rgba(255, 255, 255, 1); From 8ea5f06f20ba13845bd582be8326a4d90ebb5f15 Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Tue, 16 Jun 2026 10:28:21 +0100 Subject: [PATCH 2/2] changeset --- .changeset/afraid-guests-float.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/afraid-guests-float.md diff --git a/.changeset/afraid-guests-float.md b/.changeset/afraid-guests-float.md new file mode 100644 index 0000000000..1e7a38bf48 --- /dev/null +++ b/.changeset/afraid-guests-float.md @@ -0,0 +1,7 @@ +--- +"@frontify/fondue-tokens": patch +"@frontify/fondue": patch +"@frontify/fondue-sdk": patch +--- + +feat: add new border-radius token