@gitlab/ui 122.7.0 → 122.9.0

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 (86) hide show
  1. package/README.md +5 -2
  2. package/dist/components/base/breadcrumb/breadcrumb.js +1 -1
  3. package/dist/components/base/search_box_by_click/search_box_by_click.js +1 -1
  4. package/dist/components/dashboards/dashboard_panel/dashboard_panel.js +1 -1
  5. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +1 -1
  6. package/dist/index.css +2 -2
  7. package/dist/index.css.map +1 -1
  8. package/dist/tailwind.css +1 -1
  9. package/dist/tailwind.css.map +1 -1
  10. package/dist/tokens/build/js/tokens.dark.js +25 -7
  11. package/dist/tokens/build/js/tokens.js +24 -6
  12. package/dist/tokens/css/tokens.css +23 -5
  13. package/dist/tokens/css/tokens.dark.css +24 -6
  14. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +356 -0
  15. package/dist/tokens/docs/tokens-tailwind-docs.json +356 -0
  16. package/dist/tokens/figma/constants.tokens.json +94 -0
  17. package/dist/tokens/figma/contextual.tokens.json +80 -1
  18. package/dist/tokens/figma/semantic.tokens.json +34 -0
  19. package/dist/tokens/js/tokens.dark.js +24 -6
  20. package/dist/tokens/js/tokens.js +23 -5
  21. package/dist/tokens/json/tokens.dark.json +750 -173
  22. package/dist/tokens/json/tokens.json +749 -172
  23. package/dist/tokens/scss/_tokens.dark.scss +24 -6
  24. package/dist/tokens/scss/_tokens.scss +23 -5
  25. package/dist/tokens/scss/_tokens_custom_properties.scss +23 -5
  26. package/dist/tokens/tailwind/tokens.cjs +2 -0
  27. package/package.json +1 -1
  28. package/src/components/base/alert/alert.scss +1 -1
  29. package/src/components/base/avatar/avatar.scss +3 -3
  30. package/src/components/base/avatars_inline/avatars_inline.scss +1 -1
  31. package/src/components/base/breadcrumb/breadcrumb.scss +1 -1
  32. package/src/components/base/breadcrumb/breadcrumb.vue +1 -1
  33. package/src/components/base/broadcast_message/broadcast_message.scss +1 -1
  34. package/src/components/base/button/button.scss +1 -1
  35. package/src/components/base/card/card.scss +5 -5
  36. package/src/components/base/datepicker/datepicker.scss +3 -3
  37. package/src/components/base/dropdown/dropdown.scss +1 -1
  38. package/src/components/base/filtered_search/filtered_search.scss +1 -1
  39. package/src/components/base/filtered_search/filtered_search_suggestion_list.scss +1 -1
  40. package/src/components/base/form/form_input/form_input.scss +1 -0
  41. package/src/components/base/form/form_select/form_select.scss +1 -0
  42. package/src/components/base/form/input_group_text/input_group_text.scss +6 -5
  43. package/src/components/base/keyset_pagination/keyset_pagination.scss +1 -1
  44. package/src/components/base/link/link.scss +1 -1
  45. package/src/components/base/markdown/markdown.scss +3 -3
  46. package/src/components/base/modal/modal.scss +5 -5
  47. package/src/components/base/new_dropdowns/dropdown.scss +1 -6
  48. package/src/components/base/new_dropdowns/dropdown_item.scss +1 -1
  49. package/src/components/base/pagination/pagination.scss +2 -2
  50. package/src/components/base/path/path.scss +2 -2
  51. package/src/components/base/search_box_by_click/search_box_by_click.vue +1 -1
  52. package/src/components/base/tabs/tabs/tabs.scss +1 -1
  53. package/src/components/base/toast/toast.scss +1 -1
  54. package/src/components/base/token/token.scss +1 -1
  55. package/src/components/base/tooltip/tooltip.scss +1 -1
  56. package/src/components/charts/single_stat/single_stat.scss +1 -1
  57. package/src/components/dashboards/dashboard_panel/dashboard_panel.vue +2 -2
  58. package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue +1 -1
  59. package/src/scss/mixins.scss +2 -2
  60. package/src/scss/variables.scss +0 -1
  61. package/src/tokens/build/css/tokens.css +23 -5
  62. package/src/tokens/build/css/tokens.dark.css +24 -6
  63. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +356 -0
  64. package/src/tokens/build/docs/tokens-tailwind-docs.json +356 -0
  65. package/src/tokens/build/figma/constants.tokens.json +94 -0
  66. package/src/tokens/build/figma/contextual.tokens.json +80 -1
  67. package/src/tokens/build/figma/semantic.tokens.json +34 -0
  68. package/src/tokens/build/js/tokens.dark.js +24 -6
  69. package/src/tokens/build/js/tokens.js +23 -5
  70. package/src/tokens/build/json/tokens.dark.json +750 -173
  71. package/src/tokens/build/json/tokens.json +749 -172
  72. package/src/tokens/build/scss/_tokens.dark.scss +24 -6
  73. package/src/tokens/build/scss/_tokens.scss +23 -5
  74. package/src/tokens/build/scss/_tokens_custom_properties.scss +23 -5
  75. package/src/tokens/build/tailwind/tokens.cjs +14 -0
  76. package/src/tokens/constant/border.tokens.json +96 -0
  77. package/src/tokens/contextual/alert.tokens.json +12 -0
  78. package/src/tokens/contextual/broadcast.tokens.json +10 -0
  79. package/src/tokens/contextual/button.tokens.json +12 -0
  80. package/src/tokens/contextual/card.tokens.json +16 -0
  81. package/src/tokens/contextual/dropdown.tokens.json +12 -1
  82. package/src/tokens/contextual/modal.tokens.json +16 -0
  83. package/src/tokens/semantic/action.tokens.json +12 -0
  84. package/src/tokens/semantic/border.tokens.json +12 -0
  85. package/src/tokens/semantic/control.tokens.json +10 -0
  86. package/tailwind.defaults.js +2 -3
package/dist/tokens/docs/tokens-tailwind-docs.dark.json CHANGED
@@ -17039,6 +17039,7 @@
17039
17039
  "STROKE_COLOR"
17040
17040
  ]
17041
17041
  },
17042
+ "$deprecated": true,
17042
17043
  "filePath": "src/tokens/contextual/dropdown.tokens.json",
17043
17044
  "isSource": true,
17044
17045
  "original": {
@@ -17054,6 +17055,7 @@
17054
17055
  "STROKE_COLOR"
17055
17056
  ]
17056
17057
  },
17058
+ "$deprecated": true,
17057
17059
  "key": "{dropdown.border.color}"
17058
17060
  },
17059
17061
  "name": "DROPDOWN_BORDER_COLOR",
@@ -43702,5 +43704,359 @@
43702
43704
  ],
43703
43705
  "cssWithValue": "var(--gl-spacing-scale-11-5, 4.5rem)"
43704
43706
  }
43707
+ },
43708
+ "borderRadius": {
43709
+ "none": {
43710
+ "key": "{border.radius.none}",
43711
+ "$value": "0",
43712
+ "$type": "dimension",
43713
+ "$description": "",
43714
+ "$extensions": {
43715
+ "com.figma.scope": [
43716
+ "CORNER_RADIUS"
43717
+ ]
43718
+ },
43719
+ "filePath": "src/tokens/constant/border.tokens.json",
43720
+ "isSource": true,
43721
+ "original": {
43722
+ "$value": "{spacing-scale.0}",
43723
+ "$type": "dimension",
43724
+ "$description": "",
43725
+ "$extensions": {
43726
+ "com.figma.scope": [
43727
+ "CORNER_RADIUS"
43728
+ ]
43729
+ },
43730
+ "key": "{border.radius.none}"
43731
+ },
43732
+ "name": "BORDER_RADIUS_NONE",
43733
+ "attributes": {},
43734
+ "path": [
43735
+ "border",
43736
+ "radius",
43737
+ "none"
43738
+ ],
43739
+ "cssWithValue": "var(--gl-border-radius-none, var(--gl-spacing-scale-0, 0))"
43740
+ },
43741
+ "xs": {
43742
+ "key": "{border.radius.xs}",
43743
+ "$value": "1px",
43744
+ "$type": "dimension",
43745
+ "$description": "",
43746
+ "$extensions": {
43747
+ "com.figma.scope": [
43748
+ "CORNER_RADIUS"
43749
+ ]
43750
+ },
43751
+ "filePath": "src/tokens/constant/border.tokens.json",
43752
+ "isSource": true,
43753
+ "original": {
43754
+ "$value": "{spacing-scale.px}",
43755
+ "$type": "dimension",
43756
+ "$description": "",
43757
+ "$extensions": {
43758
+ "com.figma.scope": [
43759
+ "CORNER_RADIUS"
43760
+ ]
43761
+ },
43762
+ "key": "{border.radius.xs}"
43763
+ },
43764
+ "name": "BORDER_RADIUS_XS",
43765
+ "attributes": {},
43766
+ "path": [
43767
+ "border",
43768
+ "radius",
43769
+ "xs"
43770
+ ],
43771
+ "cssWithValue": "var(--gl-border-radius-xs, var(--gl-spacing-scale-px, 1px))"
43772
+ },
43773
+ "sm": {
43774
+ "key": "{border.radius.sm}",
43775
+ "$value": "0.125rem",
43776
+ "$type": "dimension",
43777
+ "$description": "",
43778
+ "$extensions": {
43779
+ "com.figma.scope": [
43780
+ "CORNER_RADIUS"
43781
+ ]
43782
+ },
43783
+ "filePath": "src/tokens/constant/border.tokens.json",
43784
+ "isSource": true,
43785
+ "original": {
43786
+ "$value": "{spacing-scale.1}",
43787
+ "$type": "dimension",
43788
+ "$description": "",
43789
+ "$extensions": {
43790
+ "com.figma.scope": [
43791
+ "CORNER_RADIUS"
43792
+ ]
43793
+ },
43794
+ "key": "{border.radius.sm}"
43795
+ },
43796
+ "name": "BORDER_RADIUS_SM",
43797
+ "attributes": {},
43798
+ "path": [
43799
+ "border",
43800
+ "radius",
43801
+ "sm"
43802
+ ],
43803
+ "cssWithValue": "var(--gl-border-radius-sm, var(--gl-spacing-scale-1, 0.125rem))"
43804
+ },
43805
+ "md": {
43806
+ "key": "{border.radius.md}",
43807
+ "$value": "0.25rem",
43808
+ "$type": "dimension",
43809
+ "$description": "",
43810
+ "$extensions": {
43811
+ "com.figma.scope": [
43812
+ "CORNER_RADIUS"
43813
+ ]
43814
+ },
43815
+ "filePath": "src/tokens/constant/border.tokens.json",
43816
+ "isSource": true,
43817
+ "original": {
43818
+ "$value": "{spacing-scale.2}",
43819
+ "$type": "dimension",
43820
+ "$description": "",
43821
+ "$extensions": {
43822
+ "com.figma.scope": [
43823
+ "CORNER_RADIUS"
43824
+ ]
43825
+ },
43826
+ "key": "{border.radius.md}"
43827
+ },
43828
+ "name": "BORDER_RADIUS_MD",
43829
+ "attributes": {},
43830
+ "path": [
43831
+ "border",
43832
+ "radius",
43833
+ "md"
43834
+ ],
43835
+ "cssWithValue": "var(--gl-border-radius-md, var(--gl-spacing-scale-2, 0.25rem))"
43836
+ },
43837
+ "lg": {
43838
+ "key": "{border.radius.lg}",
43839
+ "$value": "0.5rem",
43840
+ "$type": "dimension",
43841
+ "$description": "",
43842
+ "$extensions": {
43843
+ "com.figma.scope": [
43844
+ "CORNER_RADIUS"
43845
+ ]
43846
+ },
43847
+ "filePath": "src/tokens/constant/border.tokens.json",
43848
+ "isSource": true,
43849
+ "original": {
43850
+ "$value": "{spacing-scale.3}",
43851
+ "$type": "dimension",
43852
+ "$description": "",
43853
+ "$extensions": {
43854
+ "com.figma.scope": [
43855
+ "CORNER_RADIUS"
43856
+ ]
43857
+ },
43858
+ "key": "{border.radius.lg}"
43859
+ },
43860
+ "name": "BORDER_RADIUS_LG",
43861
+ "attributes": {},
43862
+ "path": [
43863
+ "border",
43864
+ "radius",
43865
+ "lg"
43866
+ ],
43867
+ "cssWithValue": "var(--gl-border-radius-lg, var(--gl-spacing-scale-3, 0.5rem))"
43868
+ },
43869
+ "xl": {
43870
+ "key": "{border.radius.xl}",
43871
+ "$value": "0.75rem",
43872
+ "$type": "dimension",
43873
+ "$description": "",
43874
+ "$extensions": {
43875
+ "com.figma.scope": [
43876
+ "CORNER_RADIUS"
43877
+ ]
43878
+ },
43879
+ "filePath": "src/tokens/constant/border.tokens.json",
43880
+ "isSource": true,
43881
+ "original": {
43882
+ "$value": "{spacing-scale.4}",
43883
+ "$type": "dimension",
43884
+ "$description": "",
43885
+ "$extensions": {
43886
+ "com.figma.scope": [
43887
+ "CORNER_RADIUS"
43888
+ ]
43889
+ },
43890
+ "key": "{border.radius.xl}"
43891
+ },
43892
+ "name": "BORDER_RADIUS_XL",
43893
+ "attributes": {},
43894
+ "path": [
43895
+ "border",
43896
+ "radius",
43897
+ "xl"
43898
+ ],
43899
+ "cssWithValue": "var(--gl-border-radius-xl, var(--gl-spacing-scale-4, 0.75rem))"
43900
+ },
43901
+ "2xl": {
43902
+ "key": "{border.radius.2xl}",
43903
+ "$value": "1rem",
43904
+ "$type": "dimension",
43905
+ "$description": "",
43906
+ "$extensions": {
43907
+ "com.figma.scope": [
43908
+ "CORNER_RADIUS"
43909
+ ]
43910
+ },
43911
+ "filePath": "src/tokens/constant/border.tokens.json",
43912
+ "isSource": true,
43913
+ "original": {
43914
+ "$value": "{spacing-scale.5}",
43915
+ "$type": "dimension",
43916
+ "$description": "",
43917
+ "$extensions": {
43918
+ "com.figma.scope": [
43919
+ "CORNER_RADIUS"
43920
+ ]
43921
+ },
43922
+ "key": "{border.radius.2xl}"
43923
+ },
43924
+ "name": "BORDER_RADIUS_2XL",
43925
+ "attributes": {},
43926
+ "path": [
43927
+ "border",
43928
+ "radius",
43929
+ "2xl"
43930
+ ],
43931
+ "cssWithValue": "var(--gl-border-radius-2xl, var(--gl-spacing-scale-5, 1rem))"
43932
+ },
43933
+ "3xl": {
43934
+ "key": "{border.radius.3xl}",
43935
+ "$value": "1.5rem",
43936
+ "$type": "dimension",
43937
+ "$description": "",
43938
+ "$extensions": {
43939
+ "com.figma.scope": [
43940
+ "CORNER_RADIUS"
43941
+ ]
43942
+ },
43943
+ "filePath": "src/tokens/constant/border.tokens.json",
43944
+ "isSource": true,
43945
+ "original": {
43946
+ "$value": "{spacing-scale.6}",
43947
+ "$type": "dimension",
43948
+ "$description": "",
43949
+ "$extensions": {
43950
+ "com.figma.scope": [
43951
+ "CORNER_RADIUS"
43952
+ ]
43953
+ },
43954
+ "key": "{border.radius.3xl}"
43955
+ },
43956
+ "name": "BORDER_RADIUS_3XL",
43957
+ "attributes": {},
43958
+ "path": [
43959
+ "border",
43960
+ "radius",
43961
+ "3xl"
43962
+ ],
43963
+ "cssWithValue": "var(--gl-border-radius-3xl, var(--gl-spacing-scale-6, 1.5rem))"
43964
+ },
43965
+ "full": {
43966
+ "key": "{border.radius.full}",
43967
+ "$value": "9999px",
43968
+ "$type": "dimension",
43969
+ "$description": "",
43970
+ "$extensions": {
43971
+ "com.figma.scope": [
43972
+ "CORNER_RADIUS"
43973
+ ]
43974
+ },
43975
+ "filePath": "src/tokens/constant/border.tokens.json",
43976
+ "isSource": true,
43977
+ "original": {
43978
+ "$value": "9999px",
43979
+ "$type": "dimension",
43980
+ "$description": "",
43981
+ "$extensions": {
43982
+ "com.figma.scope": [
43983
+ "CORNER_RADIUS"
43984
+ ]
43985
+ },
43986
+ "key": "{border.radius.full}"
43987
+ },
43988
+ "name": "BORDER_RADIUS_FULL",
43989
+ "attributes": {},
43990
+ "path": [
43991
+ "border",
43992
+ "radius",
43993
+ "full"
43994
+ ],
43995
+ "cssWithValue": "var(--gl-border-radius-full, 9999px)"
43996
+ },
43997
+ "default": {
43998
+ "key": "{border.radius.default}",
43999
+ "$value": "0.25rem",
44000
+ "$type": "dimension",
44001
+ "$description": "",
44002
+ "$extensions": {
44003
+ "com.figma.scope": [
44004
+ "CORNER_RADIUS"
44005
+ ]
44006
+ },
44007
+ "filePath": "src/tokens/semantic/border.tokens.json",
44008
+ "isSource": true,
44009
+ "original": {
44010
+ "$value": "{border.radius.md}",
44011
+ "$type": "dimension",
44012
+ "$description": "",
44013
+ "$extensions": {
44014
+ "com.figma.scope": [
44015
+ "CORNER_RADIUS"
44016
+ ]
44017
+ },
44018
+ "key": "{border.radius.default}"
44019
+ },
44020
+ "name": "BORDER_RADIUS_DEFAULT",
44021
+ "attributes": {},
44022
+ "path": [
44023
+ "border",
44024
+ "radius",
44025
+ "default"
44026
+ ],
44027
+ "cssWithValue": "var(--gl-border-radius-default, var(--gl-border-radius-md, 0.25rem))"
44028
+ },
44029
+ "control": {
44030
+ "key": "{control.border.radius}",
44031
+ "$value": "0.25rem",
44032
+ "$type": "dimension",
44033
+ "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
44034
+ "$extensions": {
44035
+ "com.figma.scope": [
44036
+ "CORNER_RADIUS"
44037
+ ]
44038
+ },
44039
+ "filePath": "src/tokens/semantic/control.tokens.json",
44040
+ "isSource": true,
44041
+ "original": {
44042
+ "$value": "{border.radius.default}",
44043
+ "$type": "dimension",
44044
+ "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
44045
+ "$extensions": {
44046
+ "com.figma.scope": [
44047
+ "CORNER_RADIUS"
44048
+ ]
44049
+ },
44050
+ "key": "{control.border.radius}"
44051
+ },
44052
+ "name": "CONTROL_BORDER_RADIUS",
44053
+ "attributes": {},
44054
+ "path": [
44055
+ "control",
44056
+ "border",
44057
+ "radius"
44058
+ ],
44059
+ "cssWithValue": "var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))"
44060
+ }
43705
44061
  }
43706
44062
  }