npm - @gitlab/ui - Versions diffs - 122.11.0 → 122.12.1 - Mend

@gitlab/ui 122.11.0 → 122.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +28 -2
package/dist/components/base/new_dropdowns/base_dropdown/dropdown_container.js +32 -0
package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +3 -4
package/dist/index.css +2 -2
package/dist/index.css.map +1 -1
package/dist/tailwind.css +1 -1
package/dist/tailwind.css.map +1 -1
package/dist/tokens/build/js/tokens.dark.js +12 -1
package/dist/tokens/build/js/tokens.js +12 -1
package/dist/tokens/css/tokens.css +11 -0
package/dist/tokens/css/tokens.dark.css +11 -0
package/dist/tokens/docs/tokens-tailwind-docs.dark.json +277 -0
package/dist/tokens/docs/tokens-tailwind-docs.json +277 -0
package/dist/tokens/figma/constants.tokens.json +79 -0
package/dist/tokens/js/tokens.dark.js +11 -0
package/dist/tokens/js/tokens.js +11 -0
package/dist/tokens/json/tokens.dark.json +266 -0
package/dist/tokens/json/tokens.json +266 -0
package/dist/tokens/scss/_tokens.dark.scss +11 -0
package/dist/tokens/scss/_tokens.scss +11 -0
package/dist/tokens/scss/_tokens_custom_properties.scss +11 -0
package/dist/tokens/tailwind/tokens.cjs +2 -0
package/package.json +1 -1
package/src/components/base/form/form_group/form_group.scss +1 -1
package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue +54 -17
package/src/components/base/new_dropdowns/base_dropdown/dropdown_container.js +34 -0
package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue +2 -3
package/src/components/base/new_dropdowns/dropdown.scss +51 -48
package/src/tokens/build/css/tokens.css +11 -0
package/src/tokens/build/css/tokens.dark.css +11 -0
package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +277 -0
package/src/tokens/build/docs/tokens-tailwind-docs.json +277 -0
package/src/tokens/build/figma/constants.tokens.json +79 -0
package/src/tokens/build/js/tokens.dark.js +11 -0
package/src/tokens/build/js/tokens.js +11 -0
package/src/tokens/build/json/tokens.dark.json +266 -0
package/src/tokens/build/json/tokens.json +266 -0
package/src/tokens/build/scss/_tokens.dark.scss +11 -0
package/src/tokens/build/scss/_tokens.scss +11 -0
package/src/tokens/build/scss/_tokens_custom_properties.scss +11 -0
package/src/tokens/build/tailwind/tokens.cjs +14 -0
package/src/tokens/constant/opacity.tokens.json +81 -0
package/tailwind.defaults.js +2 -13

package/src/tokens/build/docs/tokens-tailwind-docs.json CHANGED Viewed

@@ -44058,5 +44058,282 @@
       ],
       "cssWithValue": "var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))"
     }
+  },
+  "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"
+      ],
+      "cssWithValue": "var(--gl-opacity-0, 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"
+      ],
+      "cssWithValue": "var(--gl-opacity-1, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-2, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-3, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-4, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-5, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-6, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-7, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-8, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-9, .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"
+      ],
+      "cssWithValue": "var(--gl-opacity-10, 1)"
+    }
   }
 }

package/src/tokens/build/figma/constants.tokens.json CHANGED Viewed

@@ -1797,6 +1797,85 @@
       }
     }
   },
+  "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": []
+      }
+    }
+  },
   "spacing-scale": {
     "0": {
       "$value": "0",

package/src/tokens/build/js/tokens.dark.js CHANGED Viewed

@@ -253,6 +253,17 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
+export const GL_OPACITY_0 = '0';
+export const GL_OPACITY_1 = '.1';
+export const GL_OPACITY_2 = '.2';
+export const GL_OPACITY_3 = '.3';
+export const GL_OPACITY_4 = '.4';
+export const GL_OPACITY_5 = '.5';
+export const GL_OPACITY_6 = '.6';
+export const GL_OPACITY_7 = '.7';
+export const GL_OPACITY_8 = '.8';
+export const GL_OPACITY_9 = '.9';
+export const GL_OPACITY_10 = '1';
 export const GL_SPACING_SCALE_0 = '0';
 export const GL_SPACING_SCALE_1 = '0.125rem';
 export const GL_SPACING_SCALE_2 = '0.25rem';

package/src/tokens/build/js/tokens.js CHANGED Viewed

@@ -253,6 +253,17 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
+export const GL_OPACITY_0 = '0';
+export const GL_OPACITY_1 = '.1';
+export const GL_OPACITY_2 = '.2';
+export const GL_OPACITY_3 = '.3';
+export const GL_OPACITY_4 = '.4';
+export const GL_OPACITY_5 = '.5';
+export const GL_OPACITY_6 = '.6';
+export const GL_OPACITY_7 = '.7';
+export const GL_OPACITY_8 = '.8';
+export const GL_OPACITY_9 = '.9';
+export const GL_OPACITY_10 = '1';
 export const GL_SPACING_SCALE_0 = '0';
 export const GL_SPACING_SCALE_1 = '0.125rem';
 export const GL_SPACING_SCALE_2 = '0.25rem';

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

@@ -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}",