deprecate(letter-spacing, paragraph-spacing, text-decoration, text-ca…

…se): align with UIKit (#10744) **Related Issue:** #9524 ## Summary letter-spacing, paragraph-spacing, text-decoration, and text-case tokens are deprecated to align tokens with the Calcite UIKit
Esri · Nov 20, 2024 · 8d1065c · 8d1065c
1 parent 0a7dbed
commit 8d1065c
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 48 deletions.
diff --git a/packages/calcite-design-tokens/src/core/font.json b/packages/calcite-design-tokens/src/core/font.json
@@ -556,6 +556,7 @@
         "none": {
           "value": "none",
           "type": "textDecoration",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -580,6 +581,7 @@
         "underline": {
           "value": "underline",
           "type": "textDecoration",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -606,6 +608,7 @@
         "none": {
           "value": "none",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -630,6 +633,7 @@
         "uppercase": {
           "value": "uppercase",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -654,6 +658,7 @@
         "lowercase": {
           "value": "lowercase",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -678,6 +683,7 @@
         "capitalize": {
           "value": "capitalize",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",

diff --git a/packages/calcite-design-tokens/src/semantic/font.json b/packages/calcite-design-tokens/src/semantic/font.json
@@ -668,6 +668,7 @@
         "tight": {
           "value": "{core.size.default.none} - .4 ",
           "type": "letterSpacing",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -692,6 +693,7 @@
         "normal": {
           "value": "{core.size.default.none}",
           "type": "letterSpacing",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -716,6 +718,7 @@
         "wide": {
           "value": "{core.size.default.none} + .4 ",
           "type": "letterSpacing",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -742,6 +745,7 @@
         "normal": {
           "value": "{core.size.default.4}",
           "type": "paragraphSpacing",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -768,6 +772,7 @@
         "none": {
           "value": "{core.font.text-decoration.none}",
           "type": "textDecoration",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -792,6 +797,7 @@
         "underline": {
           "value": "{core.font.text-decoration.underline}",
           "type": "textDecoration",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -818,6 +824,7 @@
         "none": {
           "value": "{core.font.text-case.none}",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -842,6 +849,7 @@
         "uppercase": {
           "value": "{core.font.text-case.uppercase}",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -866,6 +874,7 @@
         "lowercase": {
           "value": "{core.font.text-case.lowercase}",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",
@@ -890,6 +899,7 @@
         "capitalize": {
           "value": "{core.font.text-case.capitalize}",
           "type": "textCase",
+          "description": "Deprecated",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",

diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -68,12 +68,12 @@ exports[`generated tokens CSS core should match 1`] = `
   --calcite-opacity-8: 0.08;
   --calcite-opacity-4: 0.04;
   --calcite-opacity-0: 0;
-  --calcite-font-text-case-capitalize: capitalize;
-  --calcite-font-text-case-lowercase: lowercase;
-  --calcite-font-text-case-uppercase: uppercase;
-  --calcite-font-text-case-none: none;
-  --calcite-font-text-decoration-underline: underline;
-  --calcite-font-text-decoration-none: none;
+  --calcite-font-text-case-capitalize: capitalize; /* Deprecated */
+  --calcite-font-text-case-lowercase: lowercase; /* Deprecated */
+  --calcite-font-text-case-uppercase: uppercase; /* Deprecated */
+  --calcite-font-text-case-none: none; /* Deprecated */
+  --calcite-font-text-decoration-underline: underline; /* Deprecated */
+  --calcite-font-text-decoration-none: none; /* Deprecated */
   --calcite-font-weight-heavy: 900;
   --calcite-font-weight-black: 900; /* only for Avenir Next World (secondary font family) */
   --calcite-font-weight-extrabold: 800; /* only for Avenir Next World (secondary font family) */
@@ -413,16 +413,16 @@ exports[`generated tokens CSS global should match 1`] = `
   --calcite-opacity-dark: 0.85;
   --calcite-opacity-half: 0.5;
   --calcite-opacity-light: 0.4;
-  --calcite-font-text-case-capitalize: capitalize;
-  --calcite-font-text-case-lowercase: lowercase;
-  --calcite-font-text-case-uppercase: uppercase;
-  --calcite-font-text-case-none: none;
-  --calcite-font-text-decoration-underline: underline;
-  --calcite-font-text-decoration-none: none;
-  --calcite-font-paragraph-spacing-normal: 4px;
-  --calcite-font-letter-spacing-wide: 0.4;
-  --calcite-font-letter-spacing-normal: 0;
-  --calcite-font-letter-spacing-tight: -0.4;
+  --calcite-font-text-case-capitalize: capitalize; /* Deprecated */
+  --calcite-font-text-case-lowercase: lowercase; /* Deprecated */
+  --calcite-font-text-case-uppercase: uppercase; /* Deprecated */
+  --calcite-font-text-case-none: none; /* Deprecated */
+  --calcite-font-text-decoration-underline: underline; /* Deprecated */
+  --calcite-font-text-decoration-none: none; /* Deprecated */
+  --calcite-font-paragraph-spacing-normal: 4px; /* Deprecated */
+  --calcite-font-letter-spacing-wide: 0.4; /* Deprecated */
+  --calcite-font-letter-spacing-normal: 0; /* Deprecated */
+  --calcite-font-letter-spacing-tight: -0.4; /* Deprecated */
   --calcite-font-line-height-relative-loose: 2; /* 2 */
   --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
   --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
@@ -761,12 +761,12 @@ export const calciteFontWeightBold = "700";
 export const calciteFontWeightExtrabold = "800"; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightBlack = "900"; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightHeavy = "900";
-export const calciteFontTextDecorationNone = "none";
-export const calciteFontTextDecorationUnderline = "underline";
-export const calciteFontTextCaseNone = "none";
-export const calciteFontTextCaseUppercase = "uppercase";
-export const calciteFontTextCaseLowercase = "lowercase";
-export const calciteFontTextCaseCapitalize = "capitalize";
+export const calciteFontTextDecorationNone = "none"; // Deprecated
+export const calciteFontTextDecorationUnderline = "underline"; // Deprecated
+export const calciteFontTextCaseNone = "none"; // Deprecated
+export const calciteFontTextCaseUppercase = "uppercase"; // Deprecated
+export const calciteFontTextCaseLowercase = "lowercase"; // Deprecated
+export const calciteFontTextCaseCapitalize = "capitalize"; // Deprecated
 export const calciteOpacity0 = "0";
 export const calciteOpacity4 = "0.04";
 export const calciteOpacity8 = "0.08";
@@ -934,16 +934,16 @@ export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375
 export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5
 export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625
 export const calciteFontLineHeightRelativeLoose = "200%"; // 2
-export const calciteFontLetterSpacingTight = "-0.4";
-export const calciteFontLetterSpacingNormal = "0";
-export const calciteFontLetterSpacingWide = "0.4";
-export const calciteFontParagraphSpacingNormal = "4px";
-export const calciteFontTextDecorationNone = "none";
-export const calciteFontTextDecorationUnderline = "underline";
-export const calciteFontTextCaseNone = "none";
-export const calciteFontTextCaseUppercase = "uppercase";
-export const calciteFontTextCaseLowercase = "lowercase";
-export const calciteFontTextCaseCapitalize = "capitalize";
+export const calciteFontLetterSpacingTight = "-0.4"; // Deprecated
+export const calciteFontLetterSpacingNormal = "0"; // Deprecated
+export const calciteFontLetterSpacingWide = "0.4"; // Deprecated
+export const calciteFontParagraphSpacingNormal = "4px"; // Deprecated
+export const calciteFontTextDecorationNone = "none"; // Deprecated
+export const calciteFontTextDecorationUnderline = "underline"; // Deprecated
+export const calciteFontTextCaseNone = "none"; // Deprecated
+export const calciteFontTextCaseUppercase = "uppercase"; // Deprecated
+export const calciteFontTextCaseLowercase = "lowercase"; // Deprecated
+export const calciteFontTextCaseCapitalize = "capitalize"; // Deprecated
 export const calciteOpacityLight = "0.4";
 export const calciteOpacityHalf = "0.5";
 export const calciteOpacityDark = "0.85";
@@ -1163,15 +1163,25 @@ export const calciteFontLineHeightRelativeNormal : string;
 export const calciteFontLineHeightRelativeRelaxed : string;
 /** 2 */
 export const calciteFontLineHeightRelativeLoose : string;
+/** Deprecated */
 export const calciteFontLetterSpacingTight : string;
+/** Deprecated */
 export const calciteFontLetterSpacingNormal : string;
+/** Deprecated */
 export const calciteFontLetterSpacingWide : string;
+/** Deprecated */
 export const calciteFontParagraphSpacingNormal : string;
+/** Deprecated */
 export const calciteFontTextDecorationNone : string;
+/** Deprecated */
 export const calciteFontTextDecorationUnderline : string;
+/** Deprecated */
 export const calciteFontTextCaseNone : string;
+/** Deprecated */
 export const calciteFontTextCaseUppercase : string;
+/** Deprecated */
 export const calciteFontTextCaseLowercase : string;
+/** Deprecated */
 export const calciteFontTextCaseCapitalize : string;
 export const calciteOpacityLight : string;
 export const calciteOpacityHalf : string;
@@ -1525,11 +1535,17 @@ export const calciteFontWeightExtrabold : string;
 /** only for Avenir Next World (secondary font family) */
 export const calciteFontWeightBlack : string;
 export const calciteFontWeightHeavy : string;
+/** Deprecated */
 export const calciteFontTextDecorationNone : string;
+/** Deprecated */
 export const calciteFontTextDecorationUnderline : string;
+/** Deprecated */
 export const calciteFontTextCaseNone : string;
+/** Deprecated */
 export const calciteFontTextCaseUppercase : string;
+/** Deprecated */
 export const calciteFontTextCaseLowercase : string;
+/** Deprecated */
 export const calciteFontTextCaseCapitalize : string;
 export const calciteOpacity0 : string;
 export const calciteOpacity4 : string;
@@ -1670,12 +1686,12 @@ $calcite-opacity-10: 0.1;
 $calcite-opacity-8: 0.08;
 $calcite-opacity-4: 0.04;
 $calcite-opacity-0: 0;
-$calcite-font-text-case-capitalize: capitalize;
-$calcite-font-text-case-lowercase: lowercase;
-$calcite-font-text-case-uppercase: uppercase;
-$calcite-font-text-case-none: none;
-$calcite-font-text-decoration-underline: underline;
-$calcite-font-text-decoration-none: none;
+$calcite-font-text-case-capitalize: capitalize; // Deprecated
+$calcite-font-text-case-lowercase: lowercase; // Deprecated
+$calcite-font-text-case-uppercase: uppercase; // Deprecated
+$calcite-font-text-case-none: none; // Deprecated
+$calcite-font-text-decoration-underline: underline; // Deprecated
+$calcite-font-text-decoration-none: none; // Deprecated
 $calcite-font-weight-heavy: 900;
 $calcite-font-weight-black: 900; // only for Avenir Next World (secondary font family)
 $calcite-font-weight-extrabold: 800; // only for Avenir Next World (secondary font family)
@@ -2008,16 +2024,16 @@ $calcite-opacity-full: 1;
 $calcite-opacity-dark: 0.85;
 $calcite-opacity-half: 0.5;
 $calcite-opacity-light: 0.4;
-$calcite-font-text-case-capitalize: capitalize;
-$calcite-font-text-case-lowercase: lowercase;
-$calcite-font-text-case-uppercase: uppercase;
-$calcite-font-text-case-none: none;
-$calcite-font-text-decoration-underline: underline;
-$calcite-font-text-decoration-none: none;
-$calcite-font-paragraph-spacing-normal: 4px;
-$calcite-font-letter-spacing-wide: 0.4;
-$calcite-font-letter-spacing-normal: 0;
-$calcite-font-letter-spacing-tight: -0.4;
+$calcite-font-text-case-capitalize: capitalize; // Deprecated
+$calcite-font-text-case-lowercase: lowercase; // Deprecated
+$calcite-font-text-case-uppercase: uppercase; // Deprecated
+$calcite-font-text-case-none: none; // Deprecated
+$calcite-font-text-decoration-underline: underline; // Deprecated
+$calcite-font-text-decoration-none: none; // Deprecated
+$calcite-font-paragraph-spacing-normal: 4px; // Deprecated
+$calcite-font-letter-spacing-wide: 0.4; // Deprecated
+$calcite-font-letter-spacing-normal: 0; // Deprecated
+$calcite-font-letter-spacing-tight: -0.4; // Deprecated
 $calcite-font-line-height-relative-loose: 2; // 2
 $calcite-font-line-height-relative-relaxed: 1.625; // 1.625
 $calcite-font-line-height-relative-normal: 1.5; // 1.5