@revikornmann/muka-ui 0.26.0 → 0.27.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 (79) hide show
  1. package/dist/cjs/components/Avatar/Avatar.css +79 -30
  2. package/dist/cjs/components/Avatar/Avatar.js +1 -1
  3. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  4. package/dist/cjs/components/Avatar/AvatarGroup.js +4 -3
  5. package/dist/cjs/components/Avatar/AvatarGroup.js.map +1 -1
  6. package/dist/cjs/components/Button/Button.css +33 -0
  7. package/dist/cjs/components/Button/Button.js +2 -2
  8. package/dist/cjs/components/DataPieChart/DataPieChart.js +5 -2
  9. package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
  10. package/dist/cjs/components/DataPieChart/index.js.map +1 -1
  11. package/dist/cjs/components/Tabs/Tabs.css +37 -14
  12. package/dist/cjs/components/Tabs/Tabs.js +30 -10
  13. package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
  14. package/dist/cjs/components/index.js.map +1 -1
  15. package/dist/esm/components/Avatar/Avatar.css +79 -30
  16. package/dist/esm/components/Avatar/Avatar.js +1 -1
  17. package/dist/esm/components/Avatar/Avatar.js.map +1 -1
  18. package/dist/esm/components/Avatar/AvatarGroup.js +4 -3
  19. package/dist/esm/components/Avatar/AvatarGroup.js.map +1 -1
  20. package/dist/esm/components/Button/Button.css +33 -0
  21. package/dist/esm/components/Button/Button.js +2 -2
  22. package/dist/esm/components/DataPieChart/DataPieChart.js +4 -1
  23. package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
  24. package/dist/esm/components/DataPieChart/index.js.map +1 -1
  25. package/dist/esm/components/Tabs/Tabs.css +37 -14
  26. package/dist/esm/components/Tabs/Tabs.js +30 -10
  27. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  28. package/dist/esm/components/index.js.map +1 -1
  29. package/dist/styles/components/Avatar.css +79 -30
  30. package/dist/styles/components/Button.css +33 -0
  31. package/dist/styles/components/Tabs.css +37 -14
  32. package/dist/styles/index.css +796 -648
  33. package/dist/styles/muka-dark.css +796 -648
  34. package/dist/styles/muka-light.css +796 -648
  35. package/dist/styles/tokens-bouwplan-dark.css +48 -5
  36. package/dist/styles/tokens-bouwplan-light.css +48 -5
  37. package/dist/styles/tokens-fscl-dark.css +48 -5
  38. package/dist/styles/tokens-fscl-light.css +48 -5
  39. package/dist/styles/tokens-grip-dark.css +48 -5
  40. package/dist/styles/tokens-grip-light.css +48 -5
  41. package/dist/styles/tokens-muka-dark.css +48 -5
  42. package/dist/styles/tokens-muka-light.css +48 -5
  43. package/dist/styles/tokens-wireframe-dark.css +48 -5
  44. package/dist/styles/tokens-wireframe-light.css +48 -5
  45. package/dist/styles/wireframe-dark.css +796 -648
  46. package/dist/styles/wireframe-light.css +796 -648
  47. package/dist/types/components/Avatar/Avatar.d.ts +8 -3
  48. package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
  49. package/dist/types/components/Avatar/AvatarGroup.d.ts +10 -5
  50. package/dist/types/components/Avatar/AvatarGroup.d.ts.map +1 -1
  51. package/dist/types/components/Avatar/index.d.ts +1 -1
  52. package/dist/types/components/Avatar/index.d.ts.map +1 -1
  53. package/dist/types/components/Button/Button.d.ts +3 -3
  54. package/dist/types/components/Button/Button.d.ts.map +1 -1
  55. package/dist/types/components/DataPieChart/DataPieChart.d.ts +13 -2
  56. package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
  57. package/dist/types/components/DataPieChart/index.d.ts +1 -1
  58. package/dist/types/components/DataPieChart/index.d.ts.map +1 -1
  59. package/dist/types/components/Tabs/Tabs.d.ts +17 -2
  60. package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
  61. package/dist/types/components/index.d.ts +2 -2
  62. package/dist/types/components/index.d.ts.map +1 -1
  63. package/package.json +1 -1
  64. package/tokens/t1-primitives/color.json +10 -0
  65. package/tokens/t2-alias/base.json +14 -0
  66. package/tokens/t2-alias/brand/bouwplan/dark.json +5 -0
  67. package/tokens/t2-alias/brand/bouwplan/light.json +5 -0
  68. package/tokens/t2-alias/brand/fscl/dark.json +5 -0
  69. package/tokens/t2-alias/brand/fscl/light.json +5 -0
  70. package/tokens/t2-alias/brand/grip/dark.json +14 -0
  71. package/tokens/t2-alias/brand/grip/light.json +14 -0
  72. package/tokens/t2-alias/brand/muka/dark.json +14 -0
  73. package/tokens/t2-alias/brand/muka/light.json +14 -0
  74. package/tokens/t2-alias/brand/wireframe/dark.json +14 -0
  75. package/tokens/t2-alias/brand/wireframe/light.json +14 -0
  76. package/tokens/t3-semantics/ui.json +49 -2
  77. package/tokens/t4-components/avatar.json +82 -18
  78. package/tokens/t4-components/button.json +56 -0
  79. package/tokens/t4-components/tabs.json +41 -1
package/dist/styles/tokens-bouwplan-dark.css CHANGED
@@ -251,6 +251,8 @@
251
251
  --color-red-10: #dc3d43;
252
252
  --color-red-11: #cd2b31;
253
253
  --color-red-12: #381316;
254
+ --color-redStrong-1: #bd1524;
255
+ --color-redStrong-2: #ab001a;
254
256
  --color-ruby-1: #fffcfd;
255
257
  --color-ruby-2: #fff7f8;
256
258
  --color-ruby-3: #ffeef1;
@@ -1049,6 +1051,9 @@
1049
1051
  --color-state-error-default: #e54d4e;
1050
1052
  --color-state-error-contrast: #fea6a6;
1051
1053
  --color-state-error-background: #3d181e;
1054
+ --color-state-error-solid-default: #e54d4e;
1055
+ --color-state-error-solid-hover: #f56565;
1056
+ --color-state-error-solid-pressed: #f56565;
1052
1057
  --color-state-info-default: #7ce2fe;
1053
1058
  --color-state-info-contrast: #75c7f0;
1054
1059
  --color-state-info-background: #112840;
@@ -1149,6 +1154,9 @@
1149
1154
  --alias-color-state-error-contrast: #fea6a6;
1150
1155
  --alias-color-state-error-default: #e54d4e;
1151
1156
  --alias-color-state-error-muted: #3d181e;
1157
+ --alias-color-state-error-solid-default: #e54d4e;
1158
+ --alias-color-state-error-solid-hover: #f56565;
1159
+ --alias-color-state-error-solid-pressed: #f56565;
1152
1160
  --alias-color-state-error-surface-level0: #2c1419;
1153
1161
  --alias-color-state-error-surface-level1: #3d181e;
1154
1162
  --alias-color-state-error-surface-level2: #4a1a22;
@@ -1445,6 +1453,18 @@
1445
1453
  --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1446
1454
  --button-color-primary-shadow-pressed: none;
1447
1455
  --button-color-primary-shadow-disabled: none;
1456
+ --button-color-destructive-background-default: #e54d4e;
1457
+ --button-color-destructive-background-hover: #f56565;
1458
+ --button-color-destructive-background-pressed: #f56565;
1459
+ --button-color-destructive-background-disabled: #2a2a24;
1460
+ --button-color-destructive-foreground-default: #161615;
1461
+ --button-color-destructive-foreground-hover: #161615;
1462
+ --button-color-destructive-foreground-pressed: #161615;
1463
+ --button-color-destructive-foreground-disabled: #434339;
1464
+ --button-color-destructive-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1465
+ --button-color-destructive-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1466
+ --button-color-destructive-shadow-pressed: none;
1467
+ --button-color-destructive-shadow-disabled: none;
1448
1468
  --button-color-secondary-background-default: #23231e;
1449
1469
  --button-color-secondary-background-hover: #23231e;
1450
1470
  --button-color-secondary-background-pressed: #2a2a24;
@@ -1809,7 +1829,7 @@
1809
1829
  --contextmenu-trigger-outline-color: #f76b15;
1810
1830
  --contextmenu-trigger-outline-offset: 0.25rem;
1811
1831
  --tabs-trigger-color-default-background: #23231e;
1812
- --tabs-trigger-color-default-foreground: #e9e9e8;
1832
+ --tabs-trigger-color-default-foreground: #63635a;
1813
1833
  --tabs-trigger-color-default-border: #434339;
1814
1834
  --tabs-trigger-color-hover-background: #23231e;
1815
1835
  --tabs-trigger-color-hover-foreground: #e9e9e8;
@@ -1824,8 +1844,16 @@
1824
1844
  --tabs-trigger-padding-y: 0.5rem;
1825
1845
  --tabs-trigger-height: 3rem;
1826
1846
  --tabs-trigger-radius: 0.75rem;
1847
+ --tabs-trigger-min-height-sm: 2.5rem;
1848
+ --tabs-trigger-min-height-md: 3.5rem;
1849
+ --tabs-trigger-min-height-lg: 5rem;
1827
1850
  --tabs-panel-background: #161615;
1828
1851
  --tabs-panel-border: #434339;
1852
+ --tabs-indicator-color: #f76b15;
1853
+ --tabs-indicator-height-sm: 2px;
1854
+ --tabs-indicator-height-md: 3px;
1855
+ --tabs-indicator-height-lg: 4px;
1856
+ --tabs-list-padding-x: 1rem;
1829
1857
  --separator-color-default: #2a2a24;
1830
1858
  --separator-color-contrast: #434339;
1831
1859
  --separator-width: 0.0625rem;
@@ -1858,6 +1886,9 @@
1858
1886
  --progress-size-circle-strokeWidth-sm: 0.25rem;
1859
1887
  --progress-size-circle-strokeWidth-md: 0.5rem;
1860
1888
  --progress-size-circle-strokeWidth-lg: 0.75rem;
1889
+ --avatar-size-4xs: 1rem;
1890
+ --avatar-size-3xs: 1.5rem;
1891
+ --avatar-size-2xs: 2rem;
1861
1892
  --avatar-size-xs: 2.5rem;
1862
1893
  --avatar-size-sm: 3rem;
1863
1894
  --avatar-size-md: 4rem;
@@ -1867,26 +1898,38 @@
1867
1898
  --avatar-color-background-loading: #2a2a24;
1868
1899
  --avatar-color-foreground-default: #e9e9e8;
1869
1900
  --avatar-color-foreground-muted: #434339;
1870
- --avatar-color-border-default: #2a2a24;
1871
1901
  --avatar-color-status-online: #58d5ba;
1872
1902
  --avatar-color-status-offline: #434339;
1873
1903
  --avatar-color-status-busy: #e54d4e;
1874
1904
  --avatar-color-status-away: #ffc53d;
1875
1905
  --avatar-radius-circle: 999rem;
1876
1906
  --avatar-radius-square: 0.75rem;
1907
+ --avatar-radius-square-sm: 0.375rem;
1908
+ --avatar-font-size-3xs: 0.75rem;
1909
+ --avatar-font-size-2xs: 0.75rem;
1877
1910
  --avatar-font-size-xs: 0.75rem;
1878
1911
  --avatar-font-size-sm: 0.875rem;
1879
1912
  --avatar-font-size-md: 1.125rem;
1880
1913
  --avatar-font-size-lg: 1.25rem;
1881
1914
  --avatar-font-size-xl: 1.5rem;
1915
+ --avatar-status-size-3xs: 0.5rem;
1916
+ --avatar-status-size-2xs: 0.5rem;
1882
1917
  --avatar-status-size-xs: 0.5rem;
1883
1918
  --avatar-status-size-sm: 0.75rem;
1884
1919
  --avatar-status-size-md: 1rem;
1885
1920
  --avatar-status-size-lg: 1.25rem;
1886
1921
  --avatar-status-size-xl: 1.5rem;
1887
- --avatar-border-width: 1px;
1888
- --avatar-group-spacing-tight: -0.5rem;
1889
- --avatar-group-spacing-normal: -0.25rem;
1922
+ --avatar-group-ring-width: 0.125rem;
1923
+ --avatar-group-ring-color: #161615;
1924
+ --avatar-group-overlap-tight-sm: 2rem;
1925
+ --avatar-group-overlap-tight-2xs: 1.25rem;
1926
+ --avatar-group-overlap-tight-3xs: 1rem;
1927
+ --avatar-group-overlap-compact-sm: 1.5rem;
1928
+ --avatar-group-overlap-compact-2xs: 1rem;
1929
+ --avatar-group-overlap-compact-3xs: 0.75rem;
1930
+ --avatar-group-overlap-spacious-sm: 1rem;
1931
+ --avatar-group-overlap-spacious-2xs: 0.75rem;
1932
+ --avatar-group-overlap-spacious-3xs: 0.5rem;
1890
1933
  --toast-color-info-background: #e9e9e8;
1891
1934
  --toast-color-info-foreground: #161615;
1892
1935
  --toast-color-info-accent: #112840;
package/dist/styles/tokens-bouwplan-light.css CHANGED
@@ -251,6 +251,8 @@
251
251
  --color-red-10: #dc3d43;
252
252
  --color-red-11: #cd2b31;
253
253
  --color-red-12: #381316;
254
+ --color-redStrong-1: #bd1524;
255
+ --color-redStrong-2: #ab001a;
254
256
  --color-ruby-1: #fffcfd;
255
257
  --color-ruby-2: #fff7f8;
256
258
  --color-ruby-3: #ffeef1;
@@ -1049,6 +1051,9 @@
1049
1051
  --color-state-error-default: #e5484d;
1050
1052
  --color-state-error-contrast: #cd2b31;
1051
1053
  --color-state-error-background: #ffefef;
1054
+ --color-state-error-solid-default: #cd2b31;
1055
+ --color-state-error-solid-hover: #bd1524;
1056
+ --color-state-error-solid-pressed: #ab001a;
1052
1057
  --color-state-info-default: #68ddfd;
1053
1058
  --color-state-info-contrast: #0d8bd9;
1054
1059
  --color-state-info-background: #e1f6fd;
@@ -1149,6 +1154,9 @@
1149
1154
  --alias-color-state-error-contrast: #cd2b31;
1150
1155
  --alias-color-state-error-default: #e5484d;
1151
1156
  --alias-color-state-error-muted: #ffefef;
1157
+ --alias-color-state-error-solid-default: #cd2b31;
1158
+ --alias-color-state-error-solid-hover: #bd1524;
1159
+ --alias-color-state-error-solid-pressed: #ab001a;
1152
1160
  --alias-color-state-error-surface-level0: #fff8f8;
1153
1161
  --alias-color-state-error-surface-level1: #ffefef;
1154
1162
  --alias-color-state-error-surface-level2: #ffe5e5;
@@ -1445,6 +1453,18 @@
1445
1453
  --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1446
1454
  --button-color-primary-shadow-pressed: none;
1447
1455
  --button-color-primary-shadow-disabled: none;
1456
+ --button-color-destructive-background-default: #cd2b31;
1457
+ --button-color-destructive-background-hover: #bd1524;
1458
+ --button-color-destructive-background-pressed: #ab001a;
1459
+ --button-color-destructive-background-disabled: #e9e8e6;
1460
+ --button-color-destructive-foreground-default: #fdfdfc;
1461
+ --button-color-destructive-foreground-hover: #fdfdfc;
1462
+ --button-color-destructive-foreground-pressed: #fdfdfc;
1463
+ --button-color-destructive-foreground-disabled: #cfceca;
1464
+ --button-color-destructive-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1465
+ --button-color-destructive-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1466
+ --button-color-destructive-shadow-pressed: none;
1467
+ --button-color-destructive-shadow-disabled: none;
1448
1468
  --button-color-secondary-background-default: #f1f0ef;
1449
1469
  --button-color-secondary-background-hover: #f1f0ef;
1450
1470
  --button-color-secondary-background-pressed: #e9e8e6;
@@ -1809,7 +1829,7 @@
1809
1829
  --contextmenu-trigger-outline-color: #f76808;
1810
1830
  --contextmenu-trigger-outline-offset: 0.25rem;
1811
1831
  --tabs-trigger-color-default-background: #f1f0ef;
1812
- --tabs-trigger-color-default-foreground: #21201c;
1832
+ --tabs-trigger-color-default-foreground: #8d8d86;
1813
1833
  --tabs-trigger-color-default-border: #cfceca;
1814
1834
  --tabs-trigger-color-hover-background: #f1f0ef;
1815
1835
  --tabs-trigger-color-hover-foreground: #21201c;
@@ -1824,8 +1844,16 @@
1824
1844
  --tabs-trigger-padding-y: 0.5rem;
1825
1845
  --tabs-trigger-height: 3rem;
1826
1846
  --tabs-trigger-radius: 0.75rem;
1847
+ --tabs-trigger-min-height-sm: 2.5rem;
1848
+ --tabs-trigger-min-height-md: 3.5rem;
1849
+ --tabs-trigger-min-height-lg: 5rem;
1827
1850
  --tabs-panel-background: #fdfdfc;
1828
1851
  --tabs-panel-border: #cfceca;
1852
+ --tabs-indicator-color: #f76808;
1853
+ --tabs-indicator-height-sm: 2px;
1854
+ --tabs-indicator-height-md: 3px;
1855
+ --tabs-indicator-height-lg: 4px;
1856
+ --tabs-list-padding-x: 1rem;
1829
1857
  --separator-color-default: #e9e8e6;
1830
1858
  --separator-color-contrast: #cfceca;
1831
1859
  --separator-width: 0.0625rem;
@@ -1858,6 +1886,9 @@
1858
1886
  --progress-size-circle-strokeWidth-sm: 0.25rem;
1859
1887
  --progress-size-circle-strokeWidth-md: 0.5rem;
1860
1888
  --progress-size-circle-strokeWidth-lg: 0.75rem;
1889
+ --avatar-size-4xs: 1rem;
1890
+ --avatar-size-3xs: 1.5rem;
1891
+ --avatar-size-2xs: 2rem;
1861
1892
  --avatar-size-xs: 2.5rem;
1862
1893
  --avatar-size-sm: 3rem;
1863
1894
  --avatar-size-md: 4rem;
@@ -1867,26 +1898,38 @@
1867
1898
  --avatar-color-background-loading: #e9e8e6;
1868
1899
  --avatar-color-foreground-default: #21201c;
1869
1900
  --avatar-color-foreground-muted: #cfceca;
1870
- --avatar-color-border-default: #e9e8e6;
1871
1901
  --avatar-color-status-online: #027864;
1872
1902
  --avatar-color-status-offline: #cfceca;
1873
1903
  --avatar-color-status-busy: #e5484d;
1874
1904
  --avatar-color-status-away: #ffc53d;
1875
1905
  --avatar-radius-circle: 999rem;
1876
1906
  --avatar-radius-square: 0.75rem;
1907
+ --avatar-radius-square-sm: 0.375rem;
1908
+ --avatar-font-size-3xs: 0.75rem;
1909
+ --avatar-font-size-2xs: 0.75rem;
1877
1910
  --avatar-font-size-xs: 0.75rem;
1878
1911
  --avatar-font-size-sm: 0.875rem;
1879
1912
  --avatar-font-size-md: 1.125rem;
1880
1913
  --avatar-font-size-lg: 1.25rem;
1881
1914
  --avatar-font-size-xl: 1.5rem;
1915
+ --avatar-status-size-3xs: 0.5rem;
1916
+ --avatar-status-size-2xs: 0.5rem;
1882
1917
  --avatar-status-size-xs: 0.5rem;
1883
1918
  --avatar-status-size-sm: 0.75rem;
1884
1919
  --avatar-status-size-md: 1rem;
1885
1920
  --avatar-status-size-lg: 1.25rem;
1886
1921
  --avatar-status-size-xl: 1.5rem;
1887
- --avatar-border-width: 1px;
1888
- --avatar-group-spacing-tight: -0.5rem;
1889
- --avatar-group-spacing-normal: -0.25rem;
1922
+ --avatar-group-ring-width: 0.125rem;
1923
+ --avatar-group-ring-color: #fdfdfc;
1924
+ --avatar-group-overlap-tight-sm: 2rem;
1925
+ --avatar-group-overlap-tight-2xs: 1.25rem;
1926
+ --avatar-group-overlap-tight-3xs: 1rem;
1927
+ --avatar-group-overlap-compact-sm: 1.5rem;
1928
+ --avatar-group-overlap-compact-2xs: 1rem;
1929
+ --avatar-group-overlap-compact-3xs: 0.75rem;
1930
+ --avatar-group-overlap-spacious-sm: 1rem;
1931
+ --avatar-group-overlap-spacious-2xs: 0.75rem;
1932
+ --avatar-group-overlap-spacious-3xs: 0.5rem;
1890
1933
  --toast-color-info-background: #21201c;
1891
1934
  --toast-color-info-foreground: #fdfdfc;
1892
1935
  --toast-color-info-accent: #e1f6fd;
package/dist/styles/tokens-fscl-dark.css CHANGED
@@ -251,6 +251,8 @@
251
251
  --color-red-10: #dc3d43;
252
252
  --color-red-11: #cd2b31;
253
253
  --color-red-12: #381316;
254
+ --color-redStrong-1: #bd1524;
255
+ --color-redStrong-2: #ab001a;
254
256
  --color-ruby-1: #fffcfd;
255
257
  --color-ruby-2: #fff7f8;
256
258
  --color-ruby-3: #ffeef1;
@@ -1049,6 +1051,9 @@
1049
1051
  --color-state-error-default: #e54d4e;
1050
1052
  --color-state-error-contrast: #fea6a6;
1051
1053
  --color-state-error-background: #3d181e;
1054
+ --color-state-error-solid-default: #e54d4e;
1055
+ --color-state-error-solid-hover: #f56565;
1056
+ --color-state-error-solid-pressed: #f56565;
1052
1057
  --color-state-info-default: #0090ff;
1053
1058
  --color-state-info-contrast: #70b8ff;
1054
1059
  --color-state-info-background: #0d2847;
@@ -1149,6 +1154,9 @@
1149
1154
  --alias-color-state-error-contrast: #fea6a6;
1150
1155
  --alias-color-state-error-default: #e54d4e;
1151
1156
  --alias-color-state-error-muted: #3d181e;
1157
+ --alias-color-state-error-solid-default: #e54d4e;
1158
+ --alias-color-state-error-solid-hover: #f56565;
1159
+ --alias-color-state-error-solid-pressed: #f56565;
1152
1160
  --alias-color-state-error-surface-level0: #2c1419;
1153
1161
  --alias-color-state-error-surface-level1: #3d181e;
1154
1162
  --alias-color-state-error-surface-level2: #4a1a22;
@@ -1445,6 +1453,18 @@
1445
1453
  --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1446
1454
  --button-color-primary-shadow-pressed: none;
1447
1455
  --button-color-primary-shadow-disabled: none;
1456
+ --button-color-destructive-background-default: #e54d4e;
1457
+ --button-color-destructive-background-hover: #f56565;
1458
+ --button-color-destructive-background-pressed: #f56565;
1459
+ --button-color-destructive-background-disabled: #252925;
1460
+ --button-color-destructive-foreground-default: #151716;
1461
+ --button-color-destructive-foreground-hover: #151716;
1462
+ --button-color-destructive-foreground-pressed: #151716;
1463
+ --button-color-destructive-foreground-disabled: #393d39;
1464
+ --button-color-destructive-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1465
+ --button-color-destructive-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1466
+ --button-color-destructive-shadow-pressed: none;
1467
+ --button-color-destructive-shadow-disabled: none;
1448
1468
  --button-color-secondary-background-default: #1f231f;
1449
1469
  --button-color-secondary-background-hover: #1f231f;
1450
1470
  --button-color-secondary-background-pressed: #252925;
@@ -1809,7 +1829,7 @@
1809
1829
  --contextmenu-trigger-outline-color: #ffca16;
1810
1830
  --contextmenu-trigger-outline-offset: 0.25rem;
1811
1831
  --tabs-trigger-color-default-background: #1f231f;
1812
- --tabs-trigger-color-default-foreground: #e9ebe9;
1832
+ --tabs-trigger-color-default-foreground: #5a605a;
1813
1833
  --tabs-trigger-color-default-border: #393d39;
1814
1834
  --tabs-trigger-color-hover-background: #1f231f;
1815
1835
  --tabs-trigger-color-hover-foreground: #e9ebe9;
@@ -1824,8 +1844,16 @@
1824
1844
  --tabs-trigger-padding-y: 0.5rem;
1825
1845
  --tabs-trigger-height: 3rem;
1826
1846
  --tabs-trigger-radius: 0.75rem;
1847
+ --tabs-trigger-min-height-sm: 2.5rem;
1848
+ --tabs-trigger-min-height-md: 3.5rem;
1849
+ --tabs-trigger-min-height-lg: 5rem;
1827
1850
  --tabs-panel-background: #151716;
1828
1851
  --tabs-panel-border: #393d39;
1852
+ --tabs-indicator-color: #ffca16;
1853
+ --tabs-indicator-height-sm: 2px;
1854
+ --tabs-indicator-height-md: 3px;
1855
+ --tabs-indicator-height-lg: 4px;
1856
+ --tabs-list-padding-x: 1rem;
1829
1857
  --separator-color-default: #252925;
1830
1858
  --separator-color-contrast: #393d39;
1831
1859
  --separator-width: 0.0625rem;
@@ -1858,6 +1886,9 @@
1858
1886
  --progress-size-circle-strokeWidth-sm: 0.25rem;
1859
1887
  --progress-size-circle-strokeWidth-md: 0.5rem;
1860
1888
  --progress-size-circle-strokeWidth-lg: 0.75rem;
1889
+ --avatar-size-4xs: 1rem;
1890
+ --avatar-size-3xs: 1.5rem;
1891
+ --avatar-size-2xs: 2rem;
1861
1892
  --avatar-size-xs: 2.5rem;
1862
1893
  --avatar-size-sm: 3rem;
1863
1894
  --avatar-size-md: 4rem;
@@ -1867,26 +1898,38 @@
1867
1898
  --avatar-color-background-loading: #252925;
1868
1899
  --avatar-color-foreground-default: #e9ebe9;
1869
1900
  --avatar-color-foreground-muted: #393d39;
1870
- --avatar-color-border-default: #252925;
1871
1901
  --avatar-color-status-online: #30a46c;
1872
1902
  --avatar-color-status-offline: #393d39;
1873
1903
  --avatar-color-status-busy: #e54d4e;
1874
1904
  --avatar-color-status-away: #ffc53d;
1875
1905
  --avatar-radius-circle: 999rem;
1876
1906
  --avatar-radius-square: 0.75rem;
1907
+ --avatar-radius-square-sm: 0.375rem;
1908
+ --avatar-font-size-3xs: 0.75rem;
1909
+ --avatar-font-size-2xs: 0.75rem;
1877
1910
  --avatar-font-size-xs: 0.75rem;
1878
1911
  --avatar-font-size-sm: 0.875rem;
1879
1912
  --avatar-font-size-md: 1.125rem;
1880
1913
  --avatar-font-size-lg: 1.25rem;
1881
1914
  --avatar-font-size-xl: 1.5rem;
1915
+ --avatar-status-size-3xs: 0.5rem;
1916
+ --avatar-status-size-2xs: 0.5rem;
1882
1917
  --avatar-status-size-xs: 0.5rem;
1883
1918
  --avatar-status-size-sm: 0.75rem;
1884
1919
  --avatar-status-size-md: 1rem;
1885
1920
  --avatar-status-size-lg: 1.25rem;
1886
1921
  --avatar-status-size-xl: 1.5rem;
1887
- --avatar-border-width: 1px;
1888
- --avatar-group-spacing-tight: -0.5rem;
1889
- --avatar-group-spacing-normal: -0.25rem;
1922
+ --avatar-group-ring-width: 0.125rem;
1923
+ --avatar-group-ring-color: #151716;
1924
+ --avatar-group-overlap-tight-sm: 2rem;
1925
+ --avatar-group-overlap-tight-2xs: 1.25rem;
1926
+ --avatar-group-overlap-tight-3xs: 1rem;
1927
+ --avatar-group-overlap-compact-sm: 1.5rem;
1928
+ --avatar-group-overlap-compact-2xs: 1rem;
1929
+ --avatar-group-overlap-compact-3xs: 0.75rem;
1930
+ --avatar-group-overlap-spacious-sm: 1rem;
1931
+ --avatar-group-overlap-spacious-2xs: 0.75rem;
1932
+ --avatar-group-overlap-spacious-3xs: 0.5rem;
1890
1933
  --toast-color-info-background: #e9ebe9;
1891
1934
  --toast-color-info-foreground: #151716;
1892
1935
  --toast-color-info-accent: #0d2847;
package/dist/styles/tokens-fscl-light.css CHANGED
@@ -251,6 +251,8 @@
251
251
  --color-red-10: #dc3d43;
252
252
  --color-red-11: #cd2b31;
253
253
  --color-red-12: #381316;
254
+ --color-redStrong-1: #bd1524;
255
+ --color-redStrong-2: #ab001a;
254
256
  --color-ruby-1: #fffcfd;
255
257
  --color-ruby-2: #fff7f8;
256
258
  --color-ruby-3: #ffeef1;
@@ -1049,6 +1051,9 @@
1049
1051
  --color-state-error-default: #e5484d;
1050
1052
  --color-state-error-contrast: #cd2b31;
1051
1053
  --color-state-error-background: #ffefef;
1054
+ --color-state-error-solid-default: #cd2b31;
1055
+ --color-state-error-solid-hover: #bd1524;
1056
+ --color-state-error-solid-pressed: #ab001a;
1052
1057
  --color-state-info-default: #0091ff;
1053
1058
  --color-state-info-contrast: #0d74ce;
1054
1059
  --color-state-info-background: #edf6ff;
@@ -1149,6 +1154,9 @@
1149
1154
  --alias-color-state-error-contrast: #cd2b31;
1150
1155
  --alias-color-state-error-default: #e5484d;
1151
1156
  --alias-color-state-error-muted: #ffefef;
1157
+ --alias-color-state-error-solid-default: #cd2b31;
1158
+ --alias-color-state-error-solid-hover: #bd1524;
1159
+ --alias-color-state-error-solid-pressed: #ab001a;
1152
1160
  --alias-color-state-error-surface-level0: #fff8f8;
1153
1161
  --alias-color-state-error-surface-level1: #ffefef;
1154
1162
  --alias-color-state-error-surface-level2: #ffe5e5;
@@ -1445,6 +1453,18 @@
1445
1453
  --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1446
1454
  --button-color-primary-shadow-pressed: none;
1447
1455
  --button-color-primary-shadow-disabled: none;
1456
+ --button-color-destructive-background-default: #cd2b31;
1457
+ --button-color-destructive-background-hover: #bd1524;
1458
+ --button-color-destructive-background-pressed: #ab001a;
1459
+ --button-color-destructive-background-disabled: #e6e9e8;
1460
+ --button-color-destructive-foreground-default: #fbfdfc;
1461
+ --button-color-destructive-foreground-hover: #fbfdfc;
1462
+ --button-color-destructive-foreground-pressed: #fbfdfc;
1463
+ --button-color-destructive-foreground-disabled: #cbcfcd;
1464
+ --button-color-destructive-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1465
+ --button-color-destructive-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1466
+ --button-color-destructive-shadow-pressed: none;
1467
+ --button-color-destructive-shadow-disabled: none;
1448
1468
  --button-color-secondary-background-default: #eef1f0;
1449
1469
  --button-color-secondary-background-hover: #eef1f0;
1450
1470
  --button-color-secondary-background-pressed: #e6e9e8;
@@ -1809,7 +1829,7 @@
1809
1829
  --contextmenu-trigger-outline-color: #ab6400;
1810
1830
  --contextmenu-trigger-outline-offset: 0.25rem;
1811
1831
  --tabs-trigger-color-default-background: #eef1f0;
1812
- --tabs-trigger-color-default-foreground: #1a211e;
1832
+ --tabs-trigger-color-default-foreground: #868e8b;
1813
1833
  --tabs-trigger-color-default-border: #cbcfcd;
1814
1834
  --tabs-trigger-color-hover-background: #eef1f0;
1815
1835
  --tabs-trigger-color-hover-foreground: #1a211e;
@@ -1824,8 +1844,16 @@
1824
1844
  --tabs-trigger-padding-y: 0.5rem;
1825
1845
  --tabs-trigger-height: 3rem;
1826
1846
  --tabs-trigger-radius: 0.75rem;
1847
+ --tabs-trigger-min-height-sm: 2.5rem;
1848
+ --tabs-trigger-min-height-md: 3.5rem;
1849
+ --tabs-trigger-min-height-lg: 5rem;
1827
1850
  --tabs-panel-background: #fbfdfc;
1828
1851
  --tabs-panel-border: #cbcfcd;
1852
+ --tabs-indicator-color: #ab6400;
1853
+ --tabs-indicator-height-sm: 2px;
1854
+ --tabs-indicator-height-md: 3px;
1855
+ --tabs-indicator-height-lg: 4px;
1856
+ --tabs-list-padding-x: 1rem;
1829
1857
  --separator-color-default: #e6e9e8;
1830
1858
  --separator-color-contrast: #cbcfcd;
1831
1859
  --separator-width: 0.0625rem;
@@ -1858,6 +1886,9 @@
1858
1886
  --progress-size-circle-strokeWidth-sm: 0.25rem;
1859
1887
  --progress-size-circle-strokeWidth-md: 0.5rem;
1860
1888
  --progress-size-circle-strokeWidth-lg: 0.75rem;
1889
+ --avatar-size-4xs: 1rem;
1890
+ --avatar-size-3xs: 1.5rem;
1891
+ --avatar-size-2xs: 2rem;
1861
1892
  --avatar-size-xs: 2.5rem;
1862
1893
  --avatar-size-sm: 3rem;
1863
1894
  --avatar-size-md: 4rem;
@@ -1867,26 +1898,38 @@
1867
1898
  --avatar-color-background-loading: #e6e9e8;
1868
1899
  --avatar-color-foreground-default: #1a211e;
1869
1900
  --avatar-color-foreground-muted: #cbcfcd;
1870
- --avatar-color-border-default: #e6e9e8;
1871
1901
  --avatar-color-status-online: #30a46c;
1872
1902
  --avatar-color-status-offline: #cbcfcd;
1873
1903
  --avatar-color-status-busy: #e5484d;
1874
1904
  --avatar-color-status-away: #ffc53d;
1875
1905
  --avatar-radius-circle: 999rem;
1876
1906
  --avatar-radius-square: 0.75rem;
1907
+ --avatar-radius-square-sm: 0.375rem;
1908
+ --avatar-font-size-3xs: 0.75rem;
1909
+ --avatar-font-size-2xs: 0.75rem;
1877
1910
  --avatar-font-size-xs: 0.75rem;
1878
1911
  --avatar-font-size-sm: 0.875rem;
1879
1912
  --avatar-font-size-md: 1.125rem;
1880
1913
  --avatar-font-size-lg: 1.25rem;
1881
1914
  --avatar-font-size-xl: 1.5rem;
1915
+ --avatar-status-size-3xs: 0.5rem;
1916
+ --avatar-status-size-2xs: 0.5rem;
1882
1917
  --avatar-status-size-xs: 0.5rem;
1883
1918
  --avatar-status-size-sm: 0.75rem;
1884
1919
  --avatar-status-size-md: 1rem;
1885
1920
  --avatar-status-size-lg: 1.25rem;
1886
1921
  --avatar-status-size-xl: 1.5rem;
1887
- --avatar-border-width: 1px;
1888
- --avatar-group-spacing-tight: -0.5rem;
1889
- --avatar-group-spacing-normal: -0.25rem;
1922
+ --avatar-group-ring-width: 0.125rem;
1923
+ --avatar-group-ring-color: #fbfdfc;
1924
+ --avatar-group-overlap-tight-sm: 2rem;
1925
+ --avatar-group-overlap-tight-2xs: 1.25rem;
1926
+ --avatar-group-overlap-tight-3xs: 1rem;
1927
+ --avatar-group-overlap-compact-sm: 1.5rem;
1928
+ --avatar-group-overlap-compact-2xs: 1rem;
1929
+ --avatar-group-overlap-compact-3xs: 0.75rem;
1930
+ --avatar-group-overlap-spacious-sm: 1rem;
1931
+ --avatar-group-overlap-spacious-2xs: 0.75rem;
1932
+ --avatar-group-overlap-spacious-3xs: 0.5rem;
1890
1933
  --toast-color-info-background: #1a211e;
1891
1934
  --toast-color-info-foreground: #fbfdfc;
1892
1935
  --toast-color-info-accent: #edf6ff;
package/dist/styles/tokens-grip-dark.css CHANGED
@@ -251,6 +251,8 @@
251
251
  --color-red-10: #dc3d43;
252
252
  --color-red-11: #cd2b31;
253
253
  --color-red-12: #381316;
254
+ --color-redStrong-1: #bd1524;
255
+ --color-redStrong-2: #ab001a;
254
256
  --color-ruby-1: #fffcfd;
255
257
  --color-ruby-2: #fff7f8;
256
258
  --color-ruby-3: #ffeef1;
@@ -1049,6 +1051,9 @@
1049
1051
  --color-state-error-default: #e54d4e;
1050
1052
  --color-state-error-contrast: #fea6a6;
1051
1053
  --color-state-error-background: #3d181e;
1054
+ --color-state-error-solid-default: #e54d4e;
1055
+ --color-state-error-solid-hover: #f56565;
1056
+ --color-state-error-solid-pressed: #f56565;
1052
1057
  --color-state-info-default: #7ce2fe;
1053
1058
  --color-state-info-contrast: #75c7f0;
1054
1059
  --color-state-info-background: #112840;
@@ -1149,6 +1154,9 @@
1149
1154
  --alias-color-state-error-contrast: #fea6a6;
1150
1155
  --alias-color-state-error-default: #e54d4e;
1151
1156
  --alias-color-state-error-muted: #3d181e;
1157
+ --alias-color-state-error-solid-default: #e54d4e;
1158
+ --alias-color-state-error-solid-hover: #f56565;
1159
+ --alias-color-state-error-solid-pressed: #f56565;
1152
1160
  --alias-color-state-error-surface-level0: #2c1419;
1153
1161
  --alias-color-state-error-surface-level1: #3d181e;
1154
1162
  --alias-color-state-error-surface-level2: #4a1a22;
@@ -1445,6 +1453,18 @@
1445
1453
  --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1446
1454
  --button-color-primary-shadow-pressed: none;
1447
1455
  --button-color-primary-shadow-disabled: none;
1456
+ --button-color-destructive-background-default: #e54d4e;
1457
+ --button-color-destructive-background-hover: #f56565;
1458
+ --button-color-destructive-background-pressed: #f56565;
1459
+ --button-color-destructive-background-disabled: #2a2a24;
1460
+ --button-color-destructive-foreground-default: #161615;
1461
+ --button-color-destructive-foreground-hover: #161615;
1462
+ --button-color-destructive-foreground-pressed: #161615;
1463
+ --button-color-destructive-foreground-disabled: #434339;
1464
+ --button-color-destructive-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1465
+ --button-color-destructive-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
1466
+ --button-color-destructive-shadow-pressed: none;
1467
+ --button-color-destructive-shadow-disabled: none;
1448
1468
  --button-color-secondary-background-default: #23231e;
1449
1469
  --button-color-secondary-background-hover: #23231e;
1450
1470
  --button-color-secondary-background-pressed: #2a2a24;
@@ -1809,7 +1829,7 @@
1809
1829
  --contextmenu-trigger-outline-color: #0bd8b6;
1810
1830
  --contextmenu-trigger-outline-offset: 0.25rem;
1811
1831
  --tabs-trigger-color-default-background: #23231e;
1812
- --tabs-trigger-color-default-foreground: #e9e9e8;
1832
+ --tabs-trigger-color-default-foreground: #63635a;
1813
1833
  --tabs-trigger-color-default-border: #434339;
1814
1834
  --tabs-trigger-color-hover-background: #23231e;
1815
1835
  --tabs-trigger-color-hover-foreground: #e9e9e8;
@@ -1824,8 +1844,16 @@
1824
1844
  --tabs-trigger-padding-y: 0.5rem;
1825
1845
  --tabs-trigger-height: 3rem;
1826
1846
  --tabs-trigger-radius: 0.75rem;
1847
+ --tabs-trigger-min-height-sm: 2.5rem;
1848
+ --tabs-trigger-min-height-md: 3.5rem;
1849
+ --tabs-trigger-min-height-lg: 5rem;
1827
1850
  --tabs-panel-background: #161615;
1828
1851
  --tabs-panel-border: #434339;
1852
+ --tabs-indicator-color: #0bd8b6;
1853
+ --tabs-indicator-height-sm: 2px;
1854
+ --tabs-indicator-height-md: 3px;
1855
+ --tabs-indicator-height-lg: 4px;
1856
+ --tabs-list-padding-x: 1rem;
1829
1857
  --separator-color-default: #2a2a24;
1830
1858
  --separator-color-contrast: #434339;
1831
1859
  --separator-width: 0.0625rem;
@@ -1858,6 +1886,9 @@
1858
1886
  --progress-size-circle-strokeWidth-sm: 0.25rem;
1859
1887
  --progress-size-circle-strokeWidth-md: 0.5rem;
1860
1888
  --progress-size-circle-strokeWidth-lg: 0.75rem;
1889
+ --avatar-size-4xs: 1rem;
1890
+ --avatar-size-3xs: 1.5rem;
1891
+ --avatar-size-2xs: 2rem;
1861
1892
  --avatar-size-xs: 2.5rem;
1862
1893
  --avatar-size-sm: 3rem;
1863
1894
  --avatar-size-md: 4rem;
@@ -1867,26 +1898,38 @@
1867
1898
  --avatar-color-background-loading: #2a2a24;
1868
1899
  --avatar-color-foreground-default: #e9e9e8;
1869
1900
  --avatar-color-foreground-muted: #434339;
1870
- --avatar-color-border-default: #2a2a24;
1871
1901
  --avatar-color-status-online: #58d5ba;
1872
1902
  --avatar-color-status-offline: #434339;
1873
1903
  --avatar-color-status-busy: #e54d4e;
1874
1904
  --avatar-color-status-away: #ffc53d;
1875
1905
  --avatar-radius-circle: 999rem;
1876
1906
  --avatar-radius-square: 0.75rem;
1907
+ --avatar-radius-square-sm: 0.375rem;
1908
+ --avatar-font-size-3xs: 0.75rem;
1909
+ --avatar-font-size-2xs: 0.75rem;
1877
1910
  --avatar-font-size-xs: 0.75rem;
1878
1911
  --avatar-font-size-sm: 0.875rem;
1879
1912
  --avatar-font-size-md: 1.125rem;
1880
1913
  --avatar-font-size-lg: 1.25rem;
1881
1914
  --avatar-font-size-xl: 1.5rem;
1915
+ --avatar-status-size-3xs: 0.5rem;
1916
+ --avatar-status-size-2xs: 0.5rem;
1882
1917
  --avatar-status-size-xs: 0.5rem;
1883
1918
  --avatar-status-size-sm: 0.75rem;
1884
1919
  --avatar-status-size-md: 1rem;
1885
1920
  --avatar-status-size-lg: 1.25rem;
1886
1921
  --avatar-status-size-xl: 1.5rem;
1887
- --avatar-border-width: 1px;
1888
- --avatar-group-spacing-tight: -0.5rem;
1889
- --avatar-group-spacing-normal: -0.25rem;
1922
+ --avatar-group-ring-width: 0.125rem;
1923
+ --avatar-group-ring-color: #161615;
1924
+ --avatar-group-overlap-tight-sm: 2rem;
1925
+ --avatar-group-overlap-tight-2xs: 1.25rem;
1926
+ --avatar-group-overlap-tight-3xs: 1rem;
1927
+ --avatar-group-overlap-compact-sm: 1.5rem;
1928
+ --avatar-group-overlap-compact-2xs: 1rem;
1929
+ --avatar-group-overlap-compact-3xs: 0.75rem;
1930
+ --avatar-group-overlap-spacious-sm: 1rem;
1931
+ --avatar-group-overlap-spacious-2xs: 0.75rem;
1932
+ --avatar-group-overlap-spacious-3xs: 0.5rem;
1890
1933
  --toast-color-info-background: #e9e9e8;
1891
1934
  --toast-color-info-foreground: #161615;
1892
1935
  --toast-color-info-accent: #112840;