@common-origin/design-system 2.4.2 → 2.7.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.
@@ -4,7 +4,7 @@
4
4
  "name": "add"
5
5
  },
6
6
  "addRing": {
7
- "path": "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M11 8H13V16H11V8Z M8 11V13H16V11H8Z",
7
+ "path": "M13 11H16V13H13V16H11V13H8V11H11V8H13V11Z M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z",
8
8
  "name": "addRing"
9
9
  },
10
10
  "arrowDown": {
@@ -24,7 +24,7 @@
24
24
  "name": "arrowRight"
25
25
  },
26
26
  "bell": {
27
- "path": "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z",
27
+ "path": "M12.0001 2C15.3561 2 18.1753 4.52384 18.546 7.85938L18.7979 10.125C18.8012 10.1546 18.8024 10.1676 18.8038 10.1797C18.9166 11.1628 19.2372 12.1106 19.7432 12.9609C19.7494 12.9714 19.7553 12.9824 19.7706 13.0078L20.3487 13.9707C20.5997 14.3891 20.829 14.7681 20.9795 15.0879C21.1276 15.4024 21.2852 15.8285 21.209 16.3115C21.1337 16.789 20.8882 17.2229 20.5176 17.5332C20.1426 17.8471 19.6956 17.931 19.3497 17.9658C18.998 18.0012 18.5554 18 18.0674 18H5.93268C5.44476 18 5.00211 18.0012 4.65045 17.9658C4.30456 17.931 3.85755 17.8471 3.48248 17.5332C3.1119 17.2229 2.86641 16.789 2.79107 16.3115C2.7149 15.8285 2.87247 15.4024 3.02057 15.0879C3.17116 14.7681 3.40038 14.3891 3.65143 13.9707L4.22955 13.0078C4.24481 12.9824 4.25068 12.9714 4.25689 12.9609C4.76296 12.1106 5.08348 11.1628 5.19635 10.1797C5.19773 10.1676 5.19892 10.1546 5.20221 10.125L5.45416 7.85938C5.82477 4.52384 8.644 2 12.0001 2ZM12.0001 4C9.6631 4 7.69954 5.75741 7.44146 8.08008L7.18951 10.3457C7.18638 10.3739 7.18457 10.3907 7.18268 10.4072C7.03761 11.6714 6.62638 12.8909 5.97564 13.9844C5.96724 13.9985 5.95885 14.013 5.94439 14.0371L5.36627 15C5.09277 15.4558 4.92766 15.7334 4.83014 15.9404C4.82533 15.9506 4.82155 15.9606 4.81744 15.9697C4.82787 15.971 4.83877 15.9744 4.85064 15.9756C5.07838 15.9985 5.40111 16 5.93268 16H18.0674C18.599 16 18.9217 15.9985 19.1495 15.9756C19.161 15.9744 19.1716 15.9709 19.1817 15.9697C19.1776 15.9607 19.1747 15.9505 19.17 15.9404C19.0725 15.7334 18.9074 15.4558 18.6338 15L18.0557 14.0371C18.0413 14.013 18.0329 13.9985 18.0245 13.9844C17.3737 12.8909 16.9625 11.6714 16.8174 10.4072C16.8155 10.3907 16.8137 10.3739 16.8106 10.3457L16.5587 8.08008C16.3006 5.75741 14.337 4 12.0001 4Z M12.0001 22C10.9897 22 10.0894 21.4972 9.419 20.7256C8.75348 19.9595 8.31404 18.9367 8.11822 17.8408C8.0211 17.2971 8.38314 16.7778 8.92682 16.6807C9.47038 16.5837 9.98987 16.9457 10.087 17.4893C10.233 18.3066 10.5467 18.9742 10.9288 19.4141C11.3063 19.8486 11.6896 20 12.0001 20C12.3106 20 12.6938 19.8486 13.0713 19.4141C13.4535 18.9742 13.7671 18.3066 13.9131 17.4893C14.0102 16.9457 14.5297 16.5837 15.0733 16.6807C15.617 16.7778 15.979 17.2971 15.8819 17.8408C15.6861 18.9367 15.2466 19.9595 14.5811 20.7256C13.9108 21.4972 13.0104 22 12.0001 22Z",
28
28
  "name": "bell"
29
29
  },
30
30
  "back": {
@@ -60,13 +60,17 @@
60
60
  "name": "close"
61
61
  },
62
62
  "crossCircle": {
63
- "path": "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M14.293 8.2925L15.7073 9.70672L9.7072 15.7068L8.29299 14.2926L14.293 8.2925Z M9.70706 8.29284L8.29284 9.70706L14.2929 15.7071L15.7071 14.2929L9.70706 8.29284Z",
63
+ "path": "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z",
64
64
  "name": "crossCircle"
65
65
  },
66
66
  "directionRight": {
67
67
  "path": "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
68
68
  "name": "directionRight"
69
69
  },
70
+ "directionUp": {
71
+ "path": "M6.70703 10.707L11 6.41406L11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19L13 6.41406L17.293 10.707L18.707 9.29297L12 2.58594L5.29297 9.29297L6.70703 10.707Z",
72
+ "name": "directionUp"
73
+ },
70
74
  "edit": {
71
75
  "path": "M17.5859 9C17.5859 8.6893 17.3985 8.42381 17.0234 8.0293L16.5859 7.58594L16.414 7.41406C15.7475 6.7475 15.4141 6.41406 15 6.41406C14.5858 6.41406 14.2525 6.7475 13.5859 7.41406L6.39156 14.6084L6.16402 14.8418C6.10705 14.9052 6.06663 14.9595 6.03316 15.0186C5.9662 15.1368 5.93192 15.2702 5.86519 15.5371L5.20211 18.1914L5.14449 18.4297C5.09834 18.6377 5.09184 18.7579 5.16695 18.833C5.24206 18.9081 5.36228 18.9016 5.57027 18.8555L5.80855 18.7979L8.46285 18.1348C8.72977 18.068 8.86314 18.0338 8.9814 17.9668C9.04047 17.9333 9.09478 17.8929 9.15816 17.8359L9.39156 17.6084L16.5859 10.4141C17.2106 9.78933 17.5428 9.45735 17.582 9.07715L17.5859 9ZM19.5859 9C19.5859 9.82006 19.2281 10.4288 18.9257 10.8252C18.6586 11.1753 18.2933 11.5348 18 11.8281L10.8056 19.0225C10.686 19.1421 10.3758 19.4764 9.96675 19.708C9.55767 19.9396 9.11125 20.0332 8.94722 20.0742L6.38277 20.7158L6.38082 20.7168L6.2939 20.7383C6.17868 20.7671 5.87067 20.8489 5.58492 20.877C5.2743 20.9073 4.44039 20.9346 3.75289 20.2471C3.06538 19.5596 3.09262 18.7257 3.123 18.415C3.15102 18.1293 3.23287 17.8213 3.26168 17.7061L3.92574 15.0527L4.03707 14.6348C4.09472 14.4516 4.17615 14.2378 4.29195 14.0332L4.38375 13.8848C4.6044 13.5498 4.87279 13.299 4.9775 13.1943L12.1718 6C12.4652 5.70667 12.8246 5.34136 13.1748 5.07422C13.5711 4.77185 14.1799 4.41406 15 4.41406L15.1513 4.41797C15.8954 4.45836 16.4536 4.79076 16.8252 5.07422C17.1753 5.34136 17.5348 5.70667 17.8281 6L18 6.17188L18.4726 6.65137C18.6341 6.82169 18.7921 6.99964 18.9257 7.1748C19.2281 7.57116 19.5859 8.17994 19.5859 9Z M12.5 7.5L15.5 5.5L18.5 8.5L16.5 11.5L12.5 7.5Z",
72
76
  "name": "edit"
@@ -119,6 +123,10 @@
119
123
  "path": "M16 5.00001C16.9145 5.00001 17.7014 4.99777 18.3281 5.08204C18.9835 5.17019 19.6115 5.36934 20.1211 5.87891C20.6307 6.38849 20.8298 7.01648 20.918 7.67188C21.0022 8.29863 21 9.08547 21 10V14C21 14.9145 21.0022 15.7014 20.918 16.3281C20.8298 16.9835 20.6307 17.6115 20.1211 18.1211C19.6115 18.6307 18.9835 18.8298 18.3281 18.918C17.7014 19.0022 16.9145 19 16 19H8.00001C7.08547 19 6.29863 19.0022 5.67188 18.918C5.01648 18.8298 4.38849 18.6307 3.87891 18.1211C3.36934 17.6115 3.17019 16.9835 3.08204 16.3281C2.99777 15.7014 3.00001 14.9145 3.00001 14V10C3.00001 9.08547 2.99777 8.29863 3.08204 7.67188C3.17019 7.01648 3.36933 6.38849 3.87891 5.87891C4.38849 5.36933 5.01648 5.17019 5.67188 5.08204C6.29863 4.99777 7.08547 5.00001 8.00001 5.00001H16ZM13.3418 13.4473C12.4972 13.8696 11.5028 13.8696 10.6582 13.4473L5.00001 10.6182V14C5.00001 14.9711 5.00228 15.599 5.06446 16.0615C5.12277 16.4951 5.21687 16.6309 5.29297 16.707C5.36908 16.7831 5.50495 16.8772 5.93848 16.9356C6.40099 16.9977 7.02893 17 8.00001 17H16C16.9711 17 17.599 16.9977 18.0615 16.9356C18.4951 16.8772 18.6309 16.7831 18.707 16.707C18.7831 16.6309 18.8772 16.4951 18.9356 16.0615C18.9977 15.599 19 14.9711 19 14V10.6182L13.3418 13.4473ZM8.00001 7.00001C7.02893 7.00001 6.40099 7.00228 5.93848 7.06446C5.50494 7.12278 5.36908 7.21687 5.29297 7.29297C5.21686 7.36908 5.12278 7.50494 5.06446 7.93848C5.04619 8.07437 5.03381 8.2246 5.02442 8.39356L11.5527 11.6582C11.8343 11.799 12.1657 11.799 12.4473 11.6582L18.9746 8.39356C18.9652 8.22462 18.9538 8.07436 18.9356 7.93848C18.8772 7.50495 18.7831 7.36908 18.707 7.29297C18.6309 7.21687 18.4951 7.12277 18.0615 7.06446C17.599 7.00228 16.9711 7.00001 16 7.00001H8.00001Z",
120
124
  "name": "message"
121
125
  },
126
+ "mic": {
127
+ "path": "M12 2C14.2091 2 16 3.79086 16 6V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V6C8 3.79086 9.79086 2 12 2ZM12 4C10.8954 4 10 4.89543 10 6V11C10 12.1046 10.8954 13 12 13C13.1046 13 14 12.1046 14 11V6C14 4.89543 13.1046 4 12 4Z M19 10C19.5523 10 20 10.4477 20 11C20 13.1217 19.1575 15.1569 17.6572 16.6572C16.3938 17.9207 14.7505 18.7145 12.9961 18.9346C12.9975 18.9562 13 18.978 13 19V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19C11 18.978 11.0015 18.9562 11.0029 18.9346C9.24888 18.7143 7.60602 17.9205 6.34277 16.6572C4.84248 15.1569 4 13.1217 4 11C4 10.4477 4.44772 10 5 10C5.55228 10 6 10.4477 6 11C6 12.5913 6.63259 14.117 7.75781 15.2422C8.88303 16.3674 10.4087 17 12 17C13.5913 17 15.117 16.3674 16.2422 15.2422C17.3674 14.117 18 12.5913 18 11C18 10.4477 18.4477 10 19 10Z",
128
+ "name": "mic"
129
+ },
122
130
  "copy": {
123
131
  "path": "M16 9.00001C16.9145 9.00001 17.7014 8.99777 18.3281 9.08204C18.9835 9.17019 19.6115 9.36934 20.1211 9.87891C20.6307 10.3885 20.8298 11.0165 20.918 11.6719C21.0022 12.2986 21 13.0855 21 14V16C21 16.9145 21.0022 17.7014 20.918 18.3281C20.8298 18.9835 20.6307 19.6115 20.1211 20.1211C19.6115 20.6307 18.9835 20.8298 18.3281 20.918C17.7014 21.0022 16.9145 21 16 21H14C13.0855 21 12.2986 21.0022 11.6719 20.918C11.0165 20.8298 10.3885 20.6307 9.87891 20.1211C9.36934 19.6115 9.17019 18.9835 9.08204 18.3281C8.99777 17.7014 9.00001 16.9145 9.00001 16V14C9.00001 13.0855 8.99777 12.2986 9.08204 11.6719C9.17019 11.0165 9.36933 10.3885 9.87891 9.87891C10.3885 9.36933 11.0165 9.17019 11.6719 9.08204C12.2986 8.99777 13.0855 9.00001 14 9.00001H16ZM14 11C13.0289 11 12.401 11.0023 11.9385 11.0645C11.5049 11.1228 11.3691 11.2169 11.293 11.293C11.2169 11.3691 11.1228 11.5049 11.0645 11.9385C11.0023 12.401 11 13.0289 11 14V16C11 16.9711 11.0023 17.599 11.0645 18.0615C11.1228 18.4951 11.2169 18.6309 11.293 18.707C11.3691 18.7831 11.5049 18.8772 11.9385 18.9356C12.401 18.9977 13.0289 19 14 19H16C16.9711 19 17.599 18.9977 18.0615 18.9356C18.4951 18.8772 18.6309 18.7831 18.707 18.707C18.7831 18.6309 18.8772 18.4951 18.9356 18.0615C18.9977 17.599 19 16.9711 19 16V14C19 13.0289 18.9977 12.401 18.9356 11.9385C18.8772 11.5049 18.7831 11.3691 18.707 11.293C18.6309 11.2169 18.4951 11.1228 18.0615 11.0645C17.599 11.0023 16.9711 11 16 11H14Z M11 3.00001C11.4521 3.00001 11.8413 2.99962 12.1621 3.02149C12.4919 3.04399 12.8225 3.09352 13.1484 3.22852C13.8832 3.53299 14.467 4.1168 14.7715 4.85157C14.9065 5.17749 14.956 5.50807 14.9785 5.8379C15.0004 6.15869 15 6.54787 15 7.00001H13C13 6.52039 12.9996 6.21062 12.9834 5.97364C12.9678 5.74574 12.9411 5.6588 12.9238 5.61719C12.8223 5.37227 12.6277 5.17767 12.3828 5.07618C12.3412 5.05894 12.2543 5.03216 12.0264 5.01661C11.7894 5.00044 11.4796 5.00001 11 5.00001H8.00001C7.02893 5.00001 6.40099 5.00228 5.93848 5.06446C5.50494 5.12278 5.36908 5.21687 5.29297 5.29297C5.21686 5.36908 5.12278 5.50494 5.06446 5.93848C5.00228 6.40099 5.00001 7.02893 5.00001 8.00001V11C5.00001 11.4796 5.00044 11.7894 5.01661 12.0264C5.03216 12.2543 5.05894 12.3412 5.07618 12.3828C5.17767 12.6277 5.37227 12.8223 5.61719 12.9238C5.6588 12.9411 5.74574 12.9678 5.97364 12.9834C6.21062 12.9996 6.52039 13 7.00001 13V15C6.54787 15 6.15869 15.0004 5.8379 14.9785C5.50807 14.956 5.17749 14.9065 4.85157 14.7715C4.1168 14.467 3.53299 13.8832 3.22852 13.1484C3.09352 12.8225 3.04399 12.4919 3.02149 12.1621C2.99962 11.8413 3.00001 11.4521 3.00001 11V8.00001C3.00001 7.08547 2.99777 6.29863 3.08204 5.67188C3.17019 5.01648 3.36933 4.38849 3.87891 3.87891C4.38849 3.36933 5.01648 3.17019 5.67188 3.08204C6.29863 2.99777 7.08547 3.00001 8.00001 3.00001H11Z",
124
132
  "name": "copy"
@@ -366,6 +366,34 @@
366
366
  "backgroundColor": "transparent",
367
367
  "textColor": "#adb5bd"
368
368
  }
369
+ },
370
+ "emphasis": {
371
+ "backgroundColor": "#0265DC",
372
+ "textColor": "#ffffff",
373
+ "hover": {
374
+ "backgroundColor": "#0054B6"
375
+ },
376
+ "active": {
377
+ "backgroundColor": "#004491"
378
+ },
379
+ "disabled": {
380
+ "backgroundColor": "#dee2e6",
381
+ "textColor": "#adb5bd"
382
+ }
383
+ },
384
+ "danger": {
385
+ "backgroundColor": "#D31510",
386
+ "textColor": "#ffffff",
387
+ "hover": {
388
+ "backgroundColor": "#B40000"
389
+ },
390
+ "active": {
391
+ "backgroundColor": "#930000"
392
+ },
393
+ "disabled": {
394
+ "backgroundColor": "#dee2e6",
395
+ "textColor": "#adb5bd"
396
+ }
369
397
  }
370
398
  },
371
399
  "sizes": {
@@ -387,22 +415,66 @@
387
415
  "default": {
388
416
  "backgroundColor": "#e9ecef",
389
417
  "textColor": "#212529",
390
- "borderRadius": "0.25rem",
418
+ "borderRadius": "0.75rem",
391
419
  "padding": "2px 0.5rem",
392
420
  "font": "500 0.875rem/1.25rem 'Inter', sans-serif"
393
421
  },
422
+ "hover": {
423
+ "backgroundColor": "#dee2e6"
424
+ },
425
+ "active": {
426
+ "backgroundColor": "#ced4da"
427
+ },
428
+ "focus": {
429
+ "outline": "0.125rem solid #343a40",
430
+ "outlineOffset": "2px"
431
+ },
432
+ "disabled": {
433
+ "backgroundColor": "#e9ecef",
434
+ "textColor": "#adb5bd"
435
+ },
394
436
  "variants": {
395
437
  "emphasis": {
396
438
  "backgroundColor": "#212529",
397
- "textColor": "#ffffff"
439
+ "textColor": "#ffffff",
440
+ "hover": {
441
+ "backgroundColor": "#343a40"
442
+ },
443
+ "active": {
444
+ "backgroundColor": "#16191C"
445
+ },
446
+ "disabled": {
447
+ "backgroundColor": "#dee2e6",
448
+ "textColor": "#adb5bd"
449
+ }
398
450
  },
399
451
  "subtle": {
400
452
  "backgroundColor": "#ffffff",
401
- "textColor": "#212529"
453
+ "textColor": "#212529",
454
+ "hover": {
455
+ "backgroundColor": "#f8f9fa"
456
+ },
457
+ "active": {
458
+ "backgroundColor": "#e9ecef"
459
+ },
460
+ "disabled": {
461
+ "backgroundColor": "#ffffff",
462
+ "textColor": "#adb5bd"
463
+ }
402
464
  },
403
465
  "interactive": {
404
466
  "backgroundColor": "#0265DC",
405
- "textColor": "#ffffff"
467
+ "textColor": "#ffffff",
468
+ "hover": {
469
+ "backgroundColor": "#0054B6"
470
+ },
471
+ "active": {
472
+ "backgroundColor": "#004491"
473
+ },
474
+ "disabled": {
475
+ "backgroundColor": "#dee2e6",
476
+ "textColor": "#adb5bd"
477
+ }
406
478
  }
407
479
  },
408
480
  "sizes": {
@@ -580,12 +652,31 @@
580
652
  "$ref": "./component/index.json"
581
653
  },
582
654
  "semantic": {
655
+ "elevation": {
656
+ "none": "none",
657
+ "inset": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
658
+ "raised": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
659
+ "floating": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
660
+ "overlay": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
661
+ "sticky": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
662
+ },
583
663
  "border": {
584
664
  "default": "0.0625rem solid #e9ecef",
585
665
  "subtle": "0.0625rem solid #dee2e6",
586
666
  "strong": "0.0625rem solid #343a40",
587
667
  "focus": "0.125rem solid #343a40",
588
- "tooltip": "0.125rem dotted #dee2e6"
668
+ "tooltip": "0.125rem dotted #dee2e6",
669
+ "radius": {
670
+ "none": "0",
671
+ "xs": "0.125rem",
672
+ "sm": "0.25rem",
673
+ "md": "0.5rem",
674
+ "lg": "0.75rem",
675
+ "xl": "1rem",
676
+ "2xl": "1.5rem",
677
+ "3xl": "2rem",
678
+ "circle": "10rem"
679
+ }
589
680
  },
590
681
  "size": {
591
682
  "icon": {
@@ -365,6 +365,34 @@ var component = {
365
365
  backgroundColor: "transparent",
366
366
  textColor: "#adb5bd"
367
367
  }
368
+ },
369
+ emphasis: {
370
+ backgroundColor: "#0265DC",
371
+ textColor: "#ffffff",
372
+ hover: {
373
+ backgroundColor: "#0054B6"
374
+ },
375
+ active: {
376
+ backgroundColor: "#004491"
377
+ },
378
+ disabled: {
379
+ backgroundColor: "#dee2e6",
380
+ textColor: "#adb5bd"
381
+ }
382
+ },
383
+ danger: {
384
+ backgroundColor: "#D31510",
385
+ textColor: "#ffffff",
386
+ hover: {
387
+ backgroundColor: "#B40000"
388
+ },
389
+ active: {
390
+ backgroundColor: "#930000"
391
+ },
392
+ disabled: {
393
+ backgroundColor: "#dee2e6",
394
+ textColor: "#adb5bd"
395
+ }
368
396
  }
369
397
  },
370
398
  sizes: {
@@ -386,22 +414,66 @@ var component = {
386
414
  "default": {
387
415
  backgroundColor: "#e9ecef",
388
416
  textColor: "#212529",
389
- borderRadius: "0.25rem",
417
+ borderRadius: "0.75rem",
390
418
  padding: "2px 0.5rem",
391
419
  font: "500 0.875rem/1.25rem 'Inter', sans-serif"
392
420
  },
421
+ hover: {
422
+ backgroundColor: "#dee2e6"
423
+ },
424
+ active: {
425
+ backgroundColor: "#ced4da"
426
+ },
427
+ focus: {
428
+ outline: "0.125rem solid #343a40",
429
+ outlineOffset: "2px"
430
+ },
431
+ disabled: {
432
+ backgroundColor: "#e9ecef",
433
+ textColor: "#adb5bd"
434
+ },
393
435
  variants: {
394
436
  emphasis: {
395
437
  backgroundColor: "#212529",
396
- textColor: "#ffffff"
438
+ textColor: "#ffffff",
439
+ hover: {
440
+ backgroundColor: "#343a40"
441
+ },
442
+ active: {
443
+ backgroundColor: "#16191C"
444
+ },
445
+ disabled: {
446
+ backgroundColor: "#dee2e6",
447
+ textColor: "#adb5bd"
448
+ }
397
449
  },
398
450
  subtle: {
399
451
  backgroundColor: "#ffffff",
400
- textColor: "#212529"
452
+ textColor: "#212529",
453
+ hover: {
454
+ backgroundColor: "#f8f9fa"
455
+ },
456
+ active: {
457
+ backgroundColor: "#e9ecef"
458
+ },
459
+ disabled: {
460
+ backgroundColor: "#ffffff",
461
+ textColor: "#adb5bd"
462
+ }
401
463
  },
402
464
  interactive: {
403
465
  backgroundColor: "#0265DC",
404
- textColor: "#ffffff"
466
+ textColor: "#ffffff",
467
+ hover: {
468
+ backgroundColor: "#0054B6"
469
+ },
470
+ active: {
471
+ backgroundColor: "#004491"
472
+ },
473
+ disabled: {
474
+ backgroundColor: "#dee2e6",
475
+ textColor: "#adb5bd"
476
+ }
405
477
  }
406
478
  },
407
479
  sizes: {
@@ -579,12 +651,31 @@ var component = {
579
651
  $ref: "./component/index.json"
580
652
  };
581
653
  var semantic = {
654
+ elevation: {
655
+ none: "none",
656
+ inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
657
+ raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
658
+ floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
659
+ overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
660
+ sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
661
+ },
582
662
  border: {
583
663
  "default": "0.0625rem solid #e9ecef",
584
664
  subtle: "0.0625rem solid #dee2e6",
585
665
  strong: "0.0625rem solid #343a40",
586
666
  focus: "0.125rem solid #343a40",
587
- tooltip: "0.125rem dotted #dee2e6"
667
+ tooltip: "0.125rem dotted #dee2e6",
668
+ radius: {
669
+ none: "0",
670
+ xs: "0.125rem",
671
+ sm: "0.25rem",
672
+ md: "0.5rem",
673
+ lg: "0.75rem",
674
+ xl: "1rem",
675
+ "2xl": "1.5rem",
676
+ "3xl": "2rem",
677
+ circle: "10rem"
678
+ }
588
679
  },
589
680
  size: {
590
681
  icon: {
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../src/tokens.ts"],"sourcesContent":["// Tokens-only export for standalone usage\nimport tokensJson from './styles/tokens.json'\n\nexport const tokens = tokensJson\nexport default tokensJson\n\n// Export token types\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './styles/tokens.d'"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGO,IAAM,MAAM,GAAG;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../src/tokens.ts"],"sourcesContent":["// Tokens-only export for standalone usage\nimport tokensJson from './styles/tokens.json'\n\nexport const tokens = tokensJson\nexport default tokensJson\n\n// Export token types\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './styles/tokens.d'"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGO,IAAM,MAAM,GAAG;;;;"}
@@ -369,6 +369,34 @@ var component = {
369
369
  backgroundColor: "transparent",
370
370
  textColor: "#adb5bd"
371
371
  }
372
+ },
373
+ emphasis: {
374
+ backgroundColor: "#0265DC",
375
+ textColor: "#ffffff",
376
+ hover: {
377
+ backgroundColor: "#0054B6"
378
+ },
379
+ active: {
380
+ backgroundColor: "#004491"
381
+ },
382
+ disabled: {
383
+ backgroundColor: "#dee2e6",
384
+ textColor: "#adb5bd"
385
+ }
386
+ },
387
+ danger: {
388
+ backgroundColor: "#D31510",
389
+ textColor: "#ffffff",
390
+ hover: {
391
+ backgroundColor: "#B40000"
392
+ },
393
+ active: {
394
+ backgroundColor: "#930000"
395
+ },
396
+ disabled: {
397
+ backgroundColor: "#dee2e6",
398
+ textColor: "#adb5bd"
399
+ }
372
400
  }
373
401
  },
374
402
  sizes: {
@@ -390,22 +418,66 @@ var component = {
390
418
  "default": {
391
419
  backgroundColor: "#e9ecef",
392
420
  textColor: "#212529",
393
- borderRadius: "0.25rem",
421
+ borderRadius: "0.75rem",
394
422
  padding: "2px 0.5rem",
395
423
  font: "500 0.875rem/1.25rem 'Inter', sans-serif"
396
424
  },
425
+ hover: {
426
+ backgroundColor: "#dee2e6"
427
+ },
428
+ active: {
429
+ backgroundColor: "#ced4da"
430
+ },
431
+ focus: {
432
+ outline: "0.125rem solid #343a40",
433
+ outlineOffset: "2px"
434
+ },
435
+ disabled: {
436
+ backgroundColor: "#e9ecef",
437
+ textColor: "#adb5bd"
438
+ },
397
439
  variants: {
398
440
  emphasis: {
399
441
  backgroundColor: "#212529",
400
- textColor: "#ffffff"
442
+ textColor: "#ffffff",
443
+ hover: {
444
+ backgroundColor: "#343a40"
445
+ },
446
+ active: {
447
+ backgroundColor: "#16191C"
448
+ },
449
+ disabled: {
450
+ backgroundColor: "#dee2e6",
451
+ textColor: "#adb5bd"
452
+ }
401
453
  },
402
454
  subtle: {
403
455
  backgroundColor: "#ffffff",
404
- textColor: "#212529"
456
+ textColor: "#212529",
457
+ hover: {
458
+ backgroundColor: "#f8f9fa"
459
+ },
460
+ active: {
461
+ backgroundColor: "#e9ecef"
462
+ },
463
+ disabled: {
464
+ backgroundColor: "#ffffff",
465
+ textColor: "#adb5bd"
466
+ }
405
467
  },
406
468
  interactive: {
407
469
  backgroundColor: "#0265DC",
408
- textColor: "#ffffff"
470
+ textColor: "#ffffff",
471
+ hover: {
472
+ backgroundColor: "#0054B6"
473
+ },
474
+ active: {
475
+ backgroundColor: "#004491"
476
+ },
477
+ disabled: {
478
+ backgroundColor: "#dee2e6",
479
+ textColor: "#adb5bd"
480
+ }
409
481
  }
410
482
  },
411
483
  sizes: {
@@ -583,12 +655,31 @@ var component = {
583
655
  $ref: "./component/index.json"
584
656
  };
585
657
  var semantic = {
658
+ elevation: {
659
+ none: "none",
660
+ inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
661
+ raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
662
+ floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
663
+ overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
664
+ sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
665
+ },
586
666
  border: {
587
667
  "default": "0.0625rem solid #e9ecef",
588
668
  subtle: "0.0625rem solid #dee2e6",
589
669
  strong: "0.0625rem solid #343a40",
590
670
  focus: "0.125rem solid #343a40",
591
- tooltip: "0.125rem dotted #dee2e6"
671
+ tooltip: "0.125rem dotted #dee2e6",
672
+ radius: {
673
+ none: "0",
674
+ xs: "0.125rem",
675
+ sm: "0.25rem",
676
+ md: "0.5rem",
677
+ lg: "0.75rem",
678
+ xl: "1rem",
679
+ "2xl": "1.5rem",
680
+ "3xl": "2rem",
681
+ circle: "10rem"
682
+ }
592
683
  },
593
684
  size: {
594
685
  icon: {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/tokens.ts"],"sourcesContent":["// Tokens-only export for standalone usage\nimport tokensJson from './styles/tokens.json'\n\nexport const tokens = tokensJson\nexport default tokensJson\n\n// Export token types\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './styles/tokens.d'"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGO,IAAM,MAAM,GAAG;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/tokens.ts"],"sourcesContent":["// Tokens-only export for standalone usage\nimport tokensJson from './styles/tokens.json'\n\nexport const tokens = tokensJson\nexport default tokensJson\n\n// Export token types\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './styles/tokens.d'"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGO,IAAM,MAAM,GAAG;;;;;"}
@@ -368,6 +368,34 @@ export declare const tokens: {
368
368
  textColor: string;
369
369
  };
370
370
  };
371
+ emphasis: {
372
+ backgroundColor: string;
373
+ textColor: string;
374
+ hover: {
375
+ backgroundColor: string;
376
+ };
377
+ active: {
378
+ backgroundColor: string;
379
+ };
380
+ disabled: {
381
+ backgroundColor: string;
382
+ textColor: string;
383
+ };
384
+ };
385
+ danger: {
386
+ backgroundColor: string;
387
+ textColor: string;
388
+ hover: {
389
+ backgroundColor: string;
390
+ };
391
+ active: {
392
+ backgroundColor: string;
393
+ };
394
+ disabled: {
395
+ backgroundColor: string;
396
+ textColor: string;
397
+ };
398
+ };
371
399
  };
372
400
  sizes: {
373
401
  small: {
@@ -392,18 +420,62 @@ export declare const tokens: {
392
420
  padding: string;
393
421
  font: string;
394
422
  };
423
+ hover: {
424
+ backgroundColor: string;
425
+ };
426
+ active: {
427
+ backgroundColor: string;
428
+ };
429
+ focus: {
430
+ outline: string;
431
+ outlineOffset: string;
432
+ };
433
+ disabled: {
434
+ backgroundColor: string;
435
+ textColor: string;
436
+ };
395
437
  variants: {
396
438
  emphasis: {
397
439
  backgroundColor: string;
398
440
  textColor: string;
441
+ hover: {
442
+ backgroundColor: string;
443
+ };
444
+ active: {
445
+ backgroundColor: string;
446
+ };
447
+ disabled: {
448
+ backgroundColor: string;
449
+ textColor: string;
450
+ };
399
451
  };
400
452
  subtle: {
401
453
  backgroundColor: string;
402
454
  textColor: string;
455
+ hover: {
456
+ backgroundColor: string;
457
+ };
458
+ active: {
459
+ backgroundColor: string;
460
+ };
461
+ disabled: {
462
+ backgroundColor: string;
463
+ textColor: string;
464
+ };
403
465
  };
404
466
  interactive: {
405
467
  backgroundColor: string;
406
468
  textColor: string;
469
+ hover: {
470
+ backgroundColor: string;
471
+ };
472
+ active: {
473
+ backgroundColor: string;
474
+ };
475
+ disabled: {
476
+ backgroundColor: string;
477
+ textColor: string;
478
+ };
407
479
  };
408
480
  };
409
481
  sizes: {
@@ -581,12 +653,31 @@ export declare const tokens: {
581
653
  $ref: string;
582
654
  };
583
655
  semantic: {
656
+ elevation: {
657
+ none: string;
658
+ inset: string;
659
+ raised: string;
660
+ floating: string;
661
+ overlay: string;
662
+ sticky: string;
663
+ };
584
664
  border: {
585
665
  default: string;
586
666
  subtle: string;
587
667
  strong: string;
588
668
  focus: string;
589
669
  tooltip: string;
670
+ radius: {
671
+ none: string;
672
+ xs: string;
673
+ sm: string;
674
+ md: string;
675
+ lg: string;
676
+ xl: string;
677
+ "2xl": string;
678
+ "3xl": string;
679
+ circle: string;
680
+ };
590
681
  };
591
682
  size: {
592
683
  icon: {
@@ -1,2 +1,2 @@
1
- export type IconName = 'add' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'crossCircle' | 'directionRight' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'lamp' | 'lineOut' | 'link' | 'menu' | 'message' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide';
1
+ export type IconName = 'add' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'lamp' | 'lineOut' | 'link' | 'menu' | 'message' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide';
2
2
  export { default as iconsData } from '../styles/icons.json';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@common-origin/design-system",
3
- "version": "2.4.2",
3
+ "version": "2.7.0",
4
4
  "description": "Common Origin Design System - Framework-agnostic atomic design components with comprehensive WCAG 2.2 AA testing",
5
5
  "private": false,
6
6
  "main": "dist/index.js",