Update skin schema to support gradients and add cardContentOverlay

Telefonica · Mar 22, 2024 · 7354c90 · 7354c90
1 parent 320668a
commit 7354c90
Show file tree

Hide file tree

Showing 8 changed files with 348 additions and 4 deletions.
diff --git a/tokens/blau.json b/tokens/blau.json
@@ -619,6 +619,27 @@
       "value": "{palette.blauRed10}",
       "type": "color",
       "description": "blauRed10"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey6}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey6}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey6}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "dark": {
@@ -1241,6 +1262,27 @@
       "value": "{palette.darkModeGrey6}",
       "type": "color",
       "description": "darkModeGrey6"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey6}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey6}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey6}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "radius": {

diff --git a/tokens/movistar.json b/tokens/movistar.json
@@ -619,6 +619,27 @@
       "value": "{palette.pepper10}",
       "type": "color",
       "description": "pepper10"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey6}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey6}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey6}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "dark": {
@@ -1241,6 +1262,27 @@
       "value": "{palette.movistarBlueDark}",
       "type": "color",
       "description": "movistarBlueDark"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey6}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey6}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey6}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "radius": {

diff --git a/tokens/o2.json b/tokens/o2.json
@@ -619,6 +619,27 @@
       "value": "{palette.pepper10}",
       "type": "color",
       "description": "pepper10"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey6}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey6}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey6}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "dark": {
@@ -1241,6 +1262,27 @@
       "value": "{palette.darkModeGrey6}",
       "type": "color",
       "description": "darkModeGrey6"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey6}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey6}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey6}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "radius": {

diff --git a/tokens/schema/skin-schema.json b/tokens/schema/skin-schema.json
@@ -175,7 +175,8 @@
         "tagBackgroundInactive",
         "tagBackgroundSuccess",
         "tagBackgroundWarning",
-        "tagBackgroundError"
+        "tagBackgroundError",
+        "cardContentOverlay"
       ],
       "properties": {
         "appBarBackground": { "$ref": "#/definitions/constantProperties" },
@@ -302,6 +303,7 @@
         "tagBackgroundSuccess": { "$ref": "#/definitions/constantProperties" },
         "tagBackgroundWarning": { "$ref": "#/definitions/constantProperties" },
         "tagBackgroundError": { "$ref": "#/definitions/constantProperties" },
+        "cardContentOverlay": { "$ref": "#/definitions/constantProperties" },
         "extended": {
           "type": "object",
           "patternProperties": {
@@ -382,7 +384,7 @@
     "constantProperties": {
       "patternProperties": {
         "value": {
-          "type": "string",
+          "type": ["string", "object"],
           "anyOf": [
             {
               "comment": "Movistar",
@@ -408,10 +410,58 @@
               "comment": "Tu",
               "pattern": "(.*?rgba.*?)+([({])+(palette.(primary|primary10|primary15|primary45|primary65|primary80|blue|blue10|blue20|blue30|blue70|orange|orange20|orange55|orange65|orange70|red|red10|red40|red70|red80|green|green10|green40|green75|grey1|grey2|grey3|grey4|grey5|grey6|grey7|grey8|grey9|white|darkModeBlack|darkModeGrey|darkModeGrey6)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(primary|primary10|primary15|primary45|primary65|primary80|blue|blue10|blue20|blue30|blue70|orange|orange20|orange55|orange65|orange70|red|red10|red40|red55|red70|red80|green|green10|green40|green75|grey1|grey2|grey3|grey4|grey5|grey6|grey7|grey8|grey9|white|darkModeBlack|darkModeGrey|darkModeGrey6|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
             }
-          ]
+          ],
+          "properties": {
+            "angle": {
+              "type": "integer"
+            },
+            "colors": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "value": {
+                    "type": "string",
+                    "anyOf": [
+                      {
+                        "comment": "Movistar",
+                        "pattern": "(.*?rgba.*?)+([({])+(palette.(movistarBlue|movistarBlue10|movistarBlue20|movistarBlue30|movistarBlue40|movistarBlue55|movistarGreen|movistarGreen10|movistarGreen30|movistarGreen40|movistarGreen60|movistarGreen70|pepper|pepper10|pepper40|pepper55|pepper70|egg|egg10|egg40|egg80|pink|purple|purple10|purple40|purple70|grey1|grey2|grey3|grey4|grey5|grey6|white|movistarBlueDark|darkModeBlack|darkModeGrey|darkModeGrey2|darkModeGrey3|darkModeGrey4|darkModeGrey5|darkModeGrey6)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(movistarBlue|movistarBlue10|movistarBlue20|movistarBlue30|movistarBlue40|movistarBlue55|movistarGreen|movistarGreen10|movistarGreen30|movistarGreen40|movistarGreen60|movistarGreen70|pepper|pepper10|pepper40|pepper55|pepper70|egg|egg10|egg40|egg80|pink|purple|purple10|purple40|purple70|grey1|grey2|grey3|grey4|grey5|grey6|white|movistarBlueDark|darkModeBlack|darkModeGrey|darkModeGrey2|darkModeGrey3|darkModeGrey4|darkModeGrey5|darkModeGrey6|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
+                      },
+                      {
+                        "comment": "O2",
+                        "pattern": "(.*?rgba.*?)+([({])+(palette.(o2BluePrimary|o2BluePrimary70|o2BluePrimary90|o2BluePrimary30|o2BluePrimary15|o2BluePrimary10|o2BlueMid|o2BlueLight|o2BlueLight30|o2BlueLight35|o2Teal|o2Green|o2Green10|o2Green40|o2Green80|o2Yellow|o2Orange|o2Orange10|o2Orange40|o2Orange75|o2Pink|o2Purple|o2Purple10|o2Purple30|pepper|pepper10|pepper20|pepper40|pepper60|grey1|grey2|grey3|grey4|grey5|grey6|white|darkModeBlack|darkModeGrey|darkModeGrey6|darkModeO2BluePrimary|darkModeO2BluePrimaryDark)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(o2BluePrimary|o2BluePrimary70|o2BluePrimary90|o2BluePrimary30|o2BluePrimary15|o2BluePrimary10|o2BlueMid|o2BlueLight|o2BlueLight30|o2BlueLight35|o2Teal|o2Green|o2Green10|o2Green40|o2Green80|o2Yellow|o2Orange|o2Orange10|o2Orange40|o2Orange75|o2Pink|o2Purple|o2Purple10|o2Purple30|pepper|pepper10|pepper20|pepper40|pepper60|grey1|grey2|grey3|grey4|grey5|grey6|white|darkModeBlack|darkModeGrey|darkModeGrey6|darkModeO2BluePrimary|darkModeO2BluePrimaryDark|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
+                      },
+                      {
+                        "comment": "Vivo",
+                        "pattern": "(.*?rgba.*?)+([({])+(palette.(vivoPurple|vivoPurpleDark|vivoPurpleLight10|vivoPurpleLight20|vivoPurpleLight50|vivoPurpleLight80|vivoPurpleLight90|vivoGreen|vivoGreenDark|vivoGreenLight10|vivoGreen25|vivoGreenLight30|vivoBlue|orange|orange25|orangeDark|orangeLight10|orangeLight40|pink|pepper|pepperDark|pepperDark80|pepperLight10|pepperLight30|pepperLight40|grey1|grey2|grey3|grey4|grey5|grey6|white|darkModeBlack|darkModeGrey|darkModeGrey6)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(vivoPurple|vivoPurpleDark|vivoPurpleLight10|vivoPurpleLight20|vivoPurpleLight50|vivoPurpleLight80|vivoPurpleLight90|vivoGreen|vivoGreenDark|vivoGreenLight10|vivoGreen25|vivoGreenLight30|vivoBlue|orange|orange25|orangeDark|orangeLight10|orangeLight40|pink|pepper|pepperDark|pepperDark80|pepperLight10|pepperLight30|pepperLight40|grey1|grey2|grey3|grey4|grey5|grey6|white|darkModeBlack|darkModeGrey|darkModeGrey6|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
+                      },
+                      {
+                        "comment": "Telefónica",
+                        "pattern": "(.*?rgba.*?)+([({])+(palette.(telefonicaBlue|telefonicaBlue10|telefonicaBlue20|telefonicaBlue30|telefonicaBlue70|ambar|ambar10|ambar40|ambar70|coral|coral10|coral40|coral70|coral80|orchid|orchid10|orchid40|orchid70|turquoise|turquoise10|turquoise40|turquoise70|grey1|grey2|grey3|grey4|grey5|grey6|grey7|grey8|grey9|white|darkModeBlack|darkModeGrey|darkModeGrey6)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(telefonicaBlue|telefonicaBlue10|telefonicaBlue20|telefonicaBlue30|telefonicaBlue70|ambar|ambar10|ambar40|ambar70|coral|coral10|coral40|coral70|coral80|orchid|orchid10|orchid40|orchid70|turquoise|turquoise10|turquoise40|turquoise70|grey1|grey2|grey3|grey4|grey5|grey6|grey7|grey8|grey9|white|darkModeBlack|darkModeGrey|darkModeGrey6|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
+                      },
+                      {
+                        "comment": "Blau",
+                        "pattern": "(.*?rgba.*?)+([({])+(palette.(blauBluePrimary|blauBluePrimary10|blauBluePrimary20|blauBluePrimary30|blauBlueSecondary|blauBlueSecondary10|blauBlueSecondary20|blauBlueSecondary30|blauBlueSecondary60|blauPurple|blauPurple10|blauPurple30|blauYellow|blauYellow10|blauYellow40|blauYellow60|blauYellow70|blauGreen|blauGreen10|blauGreen30|blauGreen70|blauRed|blauRed10|blauRed20|blauRed30|blauRed40|blauRed70|grey1|grey2|grey3|grey4|grey5|grey6|white|darkModeBlack|darkModeGrey|darkModeGrey6)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(blauBluePrimary|blauBluePrimary10|blauBluePrimary20|blauBluePrimary30|blauBlueSecondary|blauBlueSecondary10|blauBlueSecondary20|blauBlueSecondary30|blauBlueSecondary60|blauPurple|blauPurple10|blauPurple30|blauYellow|blauYellow10|blauYellow40|blauYellow60|blauYellow70|blauGreen|blauGreen10|blauGreen30|blauGreen70|blauRed|blauRed10|blauRed20|blauRed30|blauRed40|blauRed70|grey1|grey2|grey3|grey4|grey5|grey6|white|darkModeBlack|darkModeGrey|darkModeGrey6|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
+                      },
+                      {
+                        "comment": "Tu",
+                        "pattern": "(.*?rgba.*?)+([({])+(palette.(primary|primary10|primary15|primary45|primary65|primary80|blue|blue10|blue20|blue30|blue70|orange|orange20|orange55|orange65|orange70|red|red10|red40|red70|red80|green|green10|green40|green75|grey1|grey2|grey3|grey4|grey5|grey6|grey7|grey8|grey9|white|darkModeBlack|darkModeGrey|darkModeGrey6)}, (0+([.][0-9]+)?|1([.]0)?)[)])$|^({palette.(primary|primary10|primary15|primary45|primary65|primary80|blue|blue10|blue20|blue30|blue70|orange|orange20|orange55|orange65|orange70|red|red10|red40|red55|red70|red80|green|green10|green40|green75|grey1|grey2|grey3|grey4|grey5|grey6|grey7|grey8|grey9|white|darkModeBlack|darkModeGrey|darkModeGrey6|)+})$|(.*?linear-gradient.*?)+([(])(?:36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])(.*?deg).*[)]$"
+                      }
+                    ]
+                  },
+                  "stop": {
+                    "type": "number"
+                  }
+                },
+                "required": ["value", "stop"]
+              }
+            }
+          },
+          "required": ["angle", "colors"]
         },
         "type": {
-          "const": "color"
+          "type": "string",
+          "enum": ["color", "linear-gradient"]
         },
         "description": {
           "type": "string",

diff --git a/tokens/telefonica.json b/tokens/telefonica.json
@@ -619,6 +619,27 @@
       "value": "{palette.coral10}",
       "type": "color",
       "description": "coral10"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey9}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey9}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey9}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "dark": {
@@ -1241,6 +1262,27 @@
       "value": "{palette.darkModeGrey6}",
       "type": "color",
       "description": "darkModeGrey6"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey9}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey9}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey9}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "radius": {

diff --git a/tokens/tu.json b/tokens/tu.json
@@ -619,6 +619,27 @@
       "value": "{palette.red10}",
       "type": "color",
       "description": "red10"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey9}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey9}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey9}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "dark": {
@@ -1241,6 +1262,27 @@
       "value": "{palette.darkModeGrey6}",
       "type": "color",
       "description": "darkModeGrey6"
+    },
+    "cardContentOverlay": {
+      "type": "linear-gradient",
+      "value": {
+        "angle": 180,
+        "colors": [
+          {
+            "value": "rgba({palette.grey9}, 0)",
+            "stop": 0
+          },
+          {
+            "value": "rgba({palette.grey9}, 0.4)",
+            "stop": 0.3
+          },
+          {
+            "value": "rgba({palette.grey9}, 1)",
+            "stop": 1
+          }
+        ]
+      },
+      "description": "grey6"
     }
   },
   "radius": {