@gitlab/ui 124.0.0 → 124.1.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.
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +17 -1
- package/dist/tokens/build/js/tokens.js +17 -1
- package/dist/tokens/css/tokens.css +20 -4
- package/dist/tokens/css/tokens.dark.css +20 -4
- package/dist/tokens/docs/tokens-tailwind-docs.dark.json +515 -3
- package/dist/tokens/docs/tokens-tailwind-docs.json +515 -3
- package/dist/tokens/figma/constants.tokens.json +203 -4
- package/dist/tokens/js/tokens.dark.js +20 -0
- package/dist/tokens/js/tokens.js +20 -0
- package/dist/tokens/json/tokens.dark.json +499 -3
- package/dist/tokens/json/tokens.json +499 -3
- package/dist/tokens/scss/_tokens.dark.scss +20 -4
- package/dist/tokens/scss/_tokens.scss +20 -4
- package/dist/tokens/scss/_tokens_custom_properties.scss +16 -0
- package/dist/tokens/tailwind/tokens.cjs +16 -0
- package/package.json +1 -1
- package/src/components/base/breadcrumb/breadcrumb.scss +2 -8
- package/src/components/base/link/link.scss +1 -1
- package/src/tokens/build/css/tokens.css +20 -4
- package/src/tokens/build/css/tokens.dark.css +20 -4
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +515 -3
- package/src/tokens/build/docs/tokens-tailwind-docs.json +515 -3
- package/src/tokens/build/figma/constants.tokens.json +203 -4
- package/src/tokens/build/js/tokens.dark.js +16 -0
- package/src/tokens/build/js/tokens.js +16 -0
- package/src/tokens/build/json/tokens.dark.json +499 -3
- package/src/tokens/build/json/tokens.json +499 -3
- package/src/tokens/build/scss/_tokens.dark.scss +20 -4
- package/src/tokens/build/scss/_tokens.scss +20 -4
- package/src/tokens/build/scss/_tokens_custom_properties.scss +16 -0
- package/src/tokens/build/tailwind/tokens.cjs +16 -0
- package/src/tokens/constant/font.tokens.json +203 -4
|
@@ -1780,8 +1780,103 @@
|
|
|
1780
1780
|
}
|
|
1781
1781
|
},
|
|
1782
1782
|
"size": {
|
|
1783
|
+
"100": {
|
|
1784
|
+
"$value": {
|
|
1785
|
+
"value": 0.75,
|
|
1786
|
+
"unit": "rem"
|
|
1787
|
+
},
|
|
1788
|
+
"$type": "dimension",
|
|
1789
|
+
"$description": "Used for meta text and small labels.",
|
|
1790
|
+
"$extensions": {
|
|
1791
|
+
"com.figma.scope": [
|
|
1792
|
+
"FONT_SIZE"
|
|
1793
|
+
]
|
|
1794
|
+
}
|
|
1795
|
+
},
|
|
1796
|
+
"200": {
|
|
1797
|
+
"$value": {
|
|
1798
|
+
"value": 0.8125,
|
|
1799
|
+
"unit": "rem"
|
|
1800
|
+
},
|
|
1801
|
+
"$type": "dimension",
|
|
1802
|
+
"$description": "Used for level 6 headings.",
|
|
1803
|
+
"$extensions": {
|
|
1804
|
+
"com.figma.scope": [
|
|
1805
|
+
"FONT_SIZE"
|
|
1806
|
+
]
|
|
1807
|
+
}
|
|
1808
|
+
},
|
|
1809
|
+
"300": {
|
|
1810
|
+
"$value": {
|
|
1811
|
+
"value": 0.875,
|
|
1812
|
+
"unit": "rem"
|
|
1813
|
+
},
|
|
1814
|
+
"$type": "dimension",
|
|
1815
|
+
"$description": "Used for level 5 headings, body text, input labels, and help text.",
|
|
1816
|
+
"$extensions": {
|
|
1817
|
+
"com.figma.scope": [
|
|
1818
|
+
"FONT_SIZE"
|
|
1819
|
+
]
|
|
1820
|
+
}
|
|
1821
|
+
},
|
|
1822
|
+
"400": {
|
|
1823
|
+
"$value": {
|
|
1824
|
+
"value": 1,
|
|
1825
|
+
"unit": "rem"
|
|
1826
|
+
},
|
|
1827
|
+
"$type": "dimension",
|
|
1828
|
+
"$description": "Used for level 4 headings, large body text.",
|
|
1829
|
+
"$extensions": {
|
|
1830
|
+
"com.figma.scope": [
|
|
1831
|
+
"FONT_SIZE"
|
|
1832
|
+
]
|
|
1833
|
+
}
|
|
1834
|
+
},
|
|
1835
|
+
"500": {
|
|
1836
|
+
"$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
|
|
1837
|
+
"$type": "dimension",
|
|
1838
|
+
"$description": "Used for responsive level 3 headings.",
|
|
1839
|
+
"$extensions": {
|
|
1840
|
+
"com.figma.scope": [
|
|
1841
|
+
"FONT_SIZE"
|
|
1842
|
+
]
|
|
1843
|
+
}
|
|
1844
|
+
},
|
|
1845
|
+
"600": {
|
|
1846
|
+
"$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
|
|
1847
|
+
"$type": "dimension",
|
|
1848
|
+
"$description": "Used for responsive level 2 headings.",
|
|
1849
|
+
"$extensions": {
|
|
1850
|
+
"com.figma.scope": [
|
|
1851
|
+
"FONT_SIZE"
|
|
1852
|
+
]
|
|
1853
|
+
}
|
|
1854
|
+
},
|
|
1855
|
+
"700": {
|
|
1856
|
+
"$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
|
|
1857
|
+
"$type": "dimension",
|
|
1858
|
+
"$description": "Used for responsive level 1 headings",
|
|
1859
|
+
"$extensions": {
|
|
1860
|
+
"com.figma.scope": [
|
|
1861
|
+
"FONT_SIZE"
|
|
1862
|
+
]
|
|
1863
|
+
}
|
|
1864
|
+
},
|
|
1865
|
+
"800": {
|
|
1866
|
+
"$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
|
|
1867
|
+
"$type": "dimension",
|
|
1868
|
+
"$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
|
|
1869
|
+
"$extensions": {
|
|
1870
|
+
"com.figma.scope": [
|
|
1871
|
+
"FONT_SIZE"
|
|
1872
|
+
]
|
|
1873
|
+
}
|
|
1874
|
+
},
|
|
1783
1875
|
"xs": {
|
|
1784
|
-
"$value":
|
|
1876
|
+
"$value": {
|
|
1877
|
+
"value": 0.625,
|
|
1878
|
+
"unit": "rem"
|
|
1879
|
+
},
|
|
1785
1880
|
"$type": "dimension",
|
|
1786
1881
|
"$extensions": {
|
|
1787
1882
|
"com.figma.scope": [
|
|
@@ -1790,7 +1885,7 @@
|
|
|
1790
1885
|
}
|
|
1791
1886
|
},
|
|
1792
1887
|
"sm": {
|
|
1793
|
-
"$value": "
|
|
1888
|
+
"$value": "{font.size.100}",
|
|
1794
1889
|
"$type": "dimension",
|
|
1795
1890
|
"$extensions": {
|
|
1796
1891
|
"com.figma.scope": [
|
|
@@ -1799,7 +1894,7 @@
|
|
|
1799
1894
|
}
|
|
1800
1895
|
},
|
|
1801
1896
|
"md": {
|
|
1802
|
-
"$value": "
|
|
1897
|
+
"$value": "{font.size.300}",
|
|
1803
1898
|
"$type": "dimension",
|
|
1804
1899
|
"$extensions": {
|
|
1805
1900
|
"com.figma.scope": [
|
|
@@ -1808,8 +1903,112 @@
|
|
|
1808
1903
|
}
|
|
1809
1904
|
},
|
|
1810
1905
|
"lg": {
|
|
1811
|
-
"$value": "
|
|
1906
|
+
"$value": "{font.size.400}",
|
|
1907
|
+
"$type": "dimension",
|
|
1908
|
+
"$extensions": {
|
|
1909
|
+
"com.figma.scope": [
|
|
1910
|
+
"FONT_SIZE"
|
|
1911
|
+
]
|
|
1912
|
+
}
|
|
1913
|
+
},
|
|
1914
|
+
"100-fixed": {
|
|
1915
|
+
"$value": {
|
|
1916
|
+
"value": 0.75,
|
|
1917
|
+
"unit": "rem"
|
|
1918
|
+
},
|
|
1919
|
+
"$type": "dimension",
|
|
1920
|
+
"$description": "Used for meta text and small labels.",
|
|
1921
|
+
"$extensions": {
|
|
1922
|
+
"com.figma.scope": [
|
|
1923
|
+
"FONT_SIZE"
|
|
1924
|
+
]
|
|
1925
|
+
}
|
|
1926
|
+
},
|
|
1927
|
+
"200-fixed": {
|
|
1928
|
+
"$value": {
|
|
1929
|
+
"value": 0.8125,
|
|
1930
|
+
"unit": "rem"
|
|
1931
|
+
},
|
|
1932
|
+
"$type": "dimension",
|
|
1933
|
+
"$description": "Used for level 6 headings.",
|
|
1934
|
+
"$extensions": {
|
|
1935
|
+
"com.figma.scope": [
|
|
1936
|
+
"FONT_SIZE"
|
|
1937
|
+
]
|
|
1938
|
+
}
|
|
1939
|
+
},
|
|
1940
|
+
"300-fixed": {
|
|
1941
|
+
"$value": {
|
|
1942
|
+
"value": 0.875,
|
|
1943
|
+
"unit": "rem"
|
|
1944
|
+
},
|
|
1945
|
+
"$type": "dimension",
|
|
1946
|
+
"$description": "Used for level 5 headings, body text, input labels, and help text.",
|
|
1947
|
+
"$extensions": {
|
|
1948
|
+
"com.figma.scope": [
|
|
1949
|
+
"FONT_SIZE"
|
|
1950
|
+
]
|
|
1951
|
+
}
|
|
1952
|
+
},
|
|
1953
|
+
"400-fixed": {
|
|
1954
|
+
"$value": {
|
|
1955
|
+
"value": 1,
|
|
1956
|
+
"unit": "rem"
|
|
1957
|
+
},
|
|
1958
|
+
"$type": "dimension",
|
|
1959
|
+
"$description": "Used for level 4 headings, large body text.",
|
|
1960
|
+
"$extensions": {
|
|
1961
|
+
"com.figma.scope": [
|
|
1962
|
+
"FONT_SIZE"
|
|
1963
|
+
]
|
|
1964
|
+
}
|
|
1965
|
+
},
|
|
1966
|
+
"500-fixed": {
|
|
1967
|
+
"$value": {
|
|
1968
|
+
"value": 1.125,
|
|
1969
|
+
"unit": "rem"
|
|
1970
|
+
},
|
|
1971
|
+
"$type": "dimension",
|
|
1972
|
+
"$description": "Used for level 3 headings.",
|
|
1973
|
+
"$extensions": {
|
|
1974
|
+
"com.figma.scope": [
|
|
1975
|
+
"FONT_SIZE"
|
|
1976
|
+
]
|
|
1977
|
+
}
|
|
1978
|
+
},
|
|
1979
|
+
"600-fixed": {
|
|
1980
|
+
"$value": {
|
|
1981
|
+
"value": 1.3125,
|
|
1982
|
+
"unit": "rem"
|
|
1983
|
+
},
|
|
1984
|
+
"$type": "dimension",
|
|
1985
|
+
"$description": "Used for level 2 headings.",
|
|
1986
|
+
"$extensions": {
|
|
1987
|
+
"com.figma.scope": [
|
|
1988
|
+
"FONT_SIZE"
|
|
1989
|
+
]
|
|
1990
|
+
}
|
|
1991
|
+
},
|
|
1992
|
+
"700-fixed": {
|
|
1993
|
+
"$value": {
|
|
1994
|
+
"value": 1.5,
|
|
1995
|
+
"unit": "rem"
|
|
1996
|
+
},
|
|
1997
|
+
"$type": "dimension",
|
|
1998
|
+
"$description": "Used for level 1 headings",
|
|
1999
|
+
"$extensions": {
|
|
2000
|
+
"com.figma.scope": [
|
|
2001
|
+
"FONT_SIZE"
|
|
2002
|
+
]
|
|
2003
|
+
}
|
|
2004
|
+
},
|
|
2005
|
+
"800-fixed": {
|
|
2006
|
+
"$value": {
|
|
2007
|
+
"value": 1.75,
|
|
2008
|
+
"unit": "rem"
|
|
2009
|
+
},
|
|
1812
2010
|
"$type": "dimension",
|
|
2011
|
+
"$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
|
|
1813
2012
|
"$extensions": {
|
|
1814
2013
|
"com.figma.scope": [
|
|
1815
2014
|
"FONT_SIZE"
|
|
@@ -272,10 +272,30 @@ export const GL_FONT_FAMILY_MONOSPACE = [
|
|
|
272
272
|
"'lucida console'",
|
|
273
273
|
"monospace",
|
|
274
274
|
];
|
|
275
|
+
export const GL_FONT_SIZE_100 = "0.75rem";
|
|
276
|
+
export const GL_FONT_SIZE_200 = "0.8125rem";
|
|
277
|
+
export const GL_FONT_SIZE_300 = "0.875rem";
|
|
278
|
+
export const GL_FONT_SIZE_400 = "1rem";
|
|
279
|
+
export const GL_FONT_SIZE_500 =
|
|
280
|
+
"clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)";
|
|
281
|
+
export const GL_FONT_SIZE_600 =
|
|
282
|
+
"clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)";
|
|
283
|
+
export const GL_FONT_SIZE_700 =
|
|
284
|
+
"clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)";
|
|
285
|
+
export const GL_FONT_SIZE_800 =
|
|
286
|
+
"clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)";
|
|
275
287
|
export const GL_FONT_SIZE_XS = "0.625rem";
|
|
276
288
|
export const GL_FONT_SIZE_SM = "0.75rem";
|
|
277
289
|
export const GL_FONT_SIZE_MD = "0.875rem";
|
|
278
290
|
export const GL_FONT_SIZE_LG = "1rem";
|
|
291
|
+
export const GL_FONT_SIZE_100_FIXED = "0.75rem";
|
|
292
|
+
export const GL_FONT_SIZE_200_FIXED = "0.8125rem";
|
|
293
|
+
export const GL_FONT_SIZE_300_FIXED = "0.875rem";
|
|
294
|
+
export const GL_FONT_SIZE_400_FIXED = "1rem";
|
|
295
|
+
export const GL_FONT_SIZE_500_FIXED = "1.125rem";
|
|
296
|
+
export const GL_FONT_SIZE_600_FIXED = "1.3125rem";
|
|
297
|
+
export const GL_FONT_SIZE_700_FIXED = "1.5rem";
|
|
298
|
+
export const GL_FONT_SIZE_800_FIXED = "1.75rem";
|
|
279
299
|
export const GL_FONT_SIZE_BASE = "0.875rem";
|
|
280
300
|
export const GL_FONT_WEIGHT_100 = "100";
|
|
281
301
|
export const GL_FONT_WEIGHT_300 = "300";
|
package/dist/tokens/js/tokens.js
CHANGED
|
@@ -272,10 +272,30 @@ export const GL_FONT_FAMILY_MONOSPACE = [
|
|
|
272
272
|
"'lucida console'",
|
|
273
273
|
"monospace",
|
|
274
274
|
];
|
|
275
|
+
export const GL_FONT_SIZE_100 = "0.75rem";
|
|
276
|
+
export const GL_FONT_SIZE_200 = "0.8125rem";
|
|
277
|
+
export const GL_FONT_SIZE_300 = "0.875rem";
|
|
278
|
+
export const GL_FONT_SIZE_400 = "1rem";
|
|
279
|
+
export const GL_FONT_SIZE_500 =
|
|
280
|
+
"clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)";
|
|
281
|
+
export const GL_FONT_SIZE_600 =
|
|
282
|
+
"clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)";
|
|
283
|
+
export const GL_FONT_SIZE_700 =
|
|
284
|
+
"clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)";
|
|
285
|
+
export const GL_FONT_SIZE_800 =
|
|
286
|
+
"clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)";
|
|
275
287
|
export const GL_FONT_SIZE_XS = "0.625rem";
|
|
276
288
|
export const GL_FONT_SIZE_SM = "0.75rem";
|
|
277
289
|
export const GL_FONT_SIZE_MD = "0.875rem";
|
|
278
290
|
export const GL_FONT_SIZE_LG = "1rem";
|
|
291
|
+
export const GL_FONT_SIZE_100_FIXED = "0.75rem";
|
|
292
|
+
export const GL_FONT_SIZE_200_FIXED = "0.8125rem";
|
|
293
|
+
export const GL_FONT_SIZE_300_FIXED = "0.875rem";
|
|
294
|
+
export const GL_FONT_SIZE_400_FIXED = "1rem";
|
|
295
|
+
export const GL_FONT_SIZE_500_FIXED = "1.125rem";
|
|
296
|
+
export const GL_FONT_SIZE_600_FIXED = "1.3125rem";
|
|
297
|
+
export const GL_FONT_SIZE_700_FIXED = "1.5rem";
|
|
298
|
+
export const GL_FONT_SIZE_800_FIXED = "1.75rem";
|
|
279
299
|
export const GL_FONT_SIZE_BASE = "0.875rem";
|
|
280
300
|
export const GL_FONT_WEIGHT_100 = "100";
|
|
281
301
|
export const GL_FONT_WEIGHT_300 = "300";
|