@gitlab/ui 122.10.0 → 122.12.0

package/src/tokens/build/json/tokens.dark.json

@@ -6436,6 +6436,272 @@
       ]
     }
   },
+  "opacity": {
+    "0": {
+      "key": "{opacity.0}",
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.0}"
+      },
+      "name": "OPACITY_0",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "0"
+      ]
+    },
+    "1": {
+      "key": "{opacity.1}",
+      "$value": ".1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.1}"
+      },
+      "name": "OPACITY_1",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "1"
+      ]
+    },
+    "2": {
+      "key": "{opacity.2}",
+      "$value": ".2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".2",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.2}"
+      },
+      "name": "OPACITY_2",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "2"
+      ]
+    },
+    "3": {
+      "key": "{opacity.3}",
+      "$value": ".3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".3",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.3}"
+      },
+      "name": "OPACITY_3",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "3"
+      ]
+    },
+    "4": {
+      "key": "{opacity.4}",
+      "$value": ".4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".4",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.4}"
+      },
+      "name": "OPACITY_4",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "4"
+      ]
+    },
+    "5": {
+      "key": "{opacity.5}",
+      "$value": ".5",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".5",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.5}"
+      },
+      "name": "OPACITY_5",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "5"
+      ]
+    },
+    "6": {
+      "key": "{opacity.6}",
+      "$value": ".6",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".6",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.6}"
+      },
+      "name": "OPACITY_6",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "6"
+      ]
+    },
+    "7": {
+      "key": "{opacity.7}",
+      "$value": ".7",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".7",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.7}"
+      },
+      "name": "OPACITY_7",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "7"
+      ]
+    },
+    "8": {
+      "key": "{opacity.8}",
+      "$value": ".8",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".8",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.8}"
+      },
+      "name": "OPACITY_8",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "8"
+      ]
+    },
+    "9": {
+      "key": "{opacity.9}",
+      "$value": ".9",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".9",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.9}"
+      },
+      "name": "OPACITY_9",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "9"
+      ]
+    },
+    "10": {
+      "key": "{opacity.10}",
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.10}"
+      },
+      "name": "OPACITY_10",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "10"
+      ]
+    }
+  },
   "spacing-scale": {
     "0": {
       "key": "{spacing-scale.0}",

package/src/tokens/build/json/tokens.json

@@ -6436,6 +6436,272 @@
       ]
     }
   },
+  "opacity": {
+    "0": {
+      "key": "{opacity.0}",
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.0}"
+      },
+      "name": "OPACITY_0",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "0"
+      ]
+    },
+    "1": {
+      "key": "{opacity.1}",
+      "$value": ".1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.1}"
+      },
+      "name": "OPACITY_1",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "1"
+      ]
+    },
+    "2": {
+      "key": "{opacity.2}",
+      "$value": ".2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".2",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.2}"
+      },
+      "name": "OPACITY_2",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "2"
+      ]
+    },
+    "3": {
+      "key": "{opacity.3}",
+      "$value": ".3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".3",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.3}"
+      },
+      "name": "OPACITY_3",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "3"
+      ]
+    },
+    "4": {
+      "key": "{opacity.4}",
+      "$value": ".4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".4",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.4}"
+      },
+      "name": "OPACITY_4",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "4"
+      ]
+    },
+    "5": {
+      "key": "{opacity.5}",
+      "$value": ".5",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".5",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.5}"
+      },
+      "name": "OPACITY_5",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "5"
+      ]
+    },
+    "6": {
+      "key": "{opacity.6}",
+      "$value": ".6",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".6",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.6}"
+      },
+      "name": "OPACITY_6",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "6"
+      ]
+    },
+    "7": {
+      "key": "{opacity.7}",
+      "$value": ".7",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".7",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.7}"
+      },
+      "name": "OPACITY_7",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "7"
+      ]
+    },
+    "8": {
+      "key": "{opacity.8}",
+      "$value": ".8",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".8",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.8}"
+      },
+      "name": "OPACITY_8",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "8"
+      ]
+    },
+    "9": {
+      "key": "{opacity.9}",
+      "$value": ".9",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".9",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.9}"
+      },
+      "name": "OPACITY_9",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "9"
+      ]
+    },
+    "10": {
+      "key": "{opacity.10}",
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.10}"
+      },
+      "name": "OPACITY_10",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "10"
+      ]
+    }
+  },
   "spacing-scale": {
     "0": {
       "key": "{spacing-scale.0}",

package/src/tokens/build/scss/_tokens.dark.scss

@@ -238,6 +238,17 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
+$gl-opacity-0: 0;
+$gl-opacity-1: .1;
+$gl-opacity-2: .2;
+$gl-opacity-3: .3;
+$gl-opacity-4: .4;
+$gl-opacity-5: .5;
+$gl-opacity-6: .6;
+$gl-opacity-7: .7;
+$gl-opacity-8: .8;
+$gl-opacity-9: .9;
+$gl-opacity-10: 1;
 $gl-spacing-scale-0: 0;
 $gl-spacing-scale-1: 0.125rem;
 $gl-spacing-scale-2: 0.25rem;

package/src/tokens/build/scss/_tokens.scss

@@ -238,6 +238,17 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
+$gl-opacity-0: 0;
+$gl-opacity-1: .1;
+$gl-opacity-2: .2;
+$gl-opacity-3: .3;
+$gl-opacity-4: .4;
+$gl-opacity-5: .5;
+$gl-opacity-6: .6;
+$gl-opacity-7: .7;
+$gl-opacity-8: .8;
+$gl-opacity-9: .9;
+$gl-opacity-10: 1;
 $gl-spacing-scale-0: 0;
 $gl-spacing-scale-1: 0.125rem;
 $gl-spacing-scale-2: 0.25rem;

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -253,6 +253,17 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-opacity-0: var(--gl-opacity-0);
+$gl-opacity-1: var(--gl-opacity-1);
+$gl-opacity-2: var(--gl-opacity-2);
+$gl-opacity-3: var(--gl-opacity-3);
+$gl-opacity-4: var(--gl-opacity-4);
+$gl-opacity-5: var(--gl-opacity-5);
+$gl-opacity-6: var(--gl-opacity-6);
+$gl-opacity-7: var(--gl-opacity-7);
+$gl-opacity-8: var(--gl-opacity-8);
+$gl-opacity-9: var(--gl-opacity-9);
+$gl-opacity-10: var(--gl-opacity-10);
 $gl-spacing-scale-0: var(--gl-spacing-scale-0);
 $gl-spacing-scale-1: var(--gl-spacing-scale-1);
 $gl-spacing-scale-2: var(--gl-spacing-scale-2);

package/src/tokens/build/tailwind/tokens.cjs

@@ -399,6 +399,19 @@ const borderRadius = {
   default: 'var(--gl-border-radius-default, var(--gl-border-radius-md, 0.25rem))',
   control: 'var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))',
 };
+const opacity = {
+  0: 'var(--gl-opacity-0, 0)',
+  1: 'var(--gl-opacity-1, .1)',
+  2: 'var(--gl-opacity-2, .2)',
+  3: 'var(--gl-opacity-3, .3)',
+  4: 'var(--gl-opacity-4, .4)',
+  5: 'var(--gl-opacity-5, .5)',
+  6: 'var(--gl-opacity-6, .6)',
+  7: 'var(--gl-opacity-7, .7)',
+  8: 'var(--gl-opacity-8, .8)',
+  9: 'var(--gl-opacity-9, .9)',
+  10: 'var(--gl-opacity-10, 1)',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -482,4 +495,5 @@ module.exports = {
   fill,
   spacing: spacingScale,
   borderRadius,
+  opacity,
 };

package/src/tokens/constant/opacity.tokens.json

@@ -0,0 +1,81 @@
+{
+  "opacity": {
+    "0": {
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "1": {
+      "$value": ".1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "2": {
+      "$value": ".2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "3": {
+      "$value": ".3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "4": {
+      "$value": ".4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "5": {
+      "$value": ".5",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "6": {
+      "$value": ".6",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "7": {
+      "$value": ".7",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "8": {
+      "$value": ".8",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "9": {
+      "$value": ".9",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "10": {
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    }
+  }
+}