@redgate/brand-web-toolkit 0.0.8 → 0.0.9

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 (10) hide show
  1. package/components/button/Button.d.ts +22 -0
  2. package/components/button/Button.js +87 -0
  3. package/components/button/Button.js.map +1 -0
  4. package/components/button/index.d.ts +2 -0
  5. package/components/button/index.js +2 -0
  6. package/components/button/index.js.map +1 -0
  7. package/package.json +1 -1
  8. package/tailwindcss/pass.css +241 -0
  9. package/tailwindcss/redgate.css +241 -0
  10. package/tailwindcss/sql-server-central.css +241 -0
package/components/button/Button.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { IIcon } from '../icons/Icon';
2
+ export type IButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'transparent';
3
+ export type IButton = {
4
+ hierarchy?: IButtonHierarchy;
5
+ label: string;
6
+ size?: 'xl';
7
+ type?: 'button' | 'reset' | 'submit' | 'link';
8
+ href?: string;
9
+ disabled?: boolean;
10
+ icon?: {
11
+ leading?: {
12
+ icon: IIcon['icon'];
13
+ size?: IIcon['size'];
14
+ };
15
+ trailing?: {
16
+ icon: IIcon['icon'];
17
+ size?: IIcon['size'];
18
+ };
19
+ };
20
+ onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
21
+ };
22
+ export default function Button({ hierarchy, label, icon, type, disabled, size, href, onClick, }: IButton): import("react/jsx-runtime").JSX.Element;
package/components/button/Button.js ADDED
@@ -0,0 +1,87 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import Icon from '../icons/Icon.js';
3
+
4
+ const classNames = [
5
+ 'inline-flex',
6
+ 'items-center',
7
+ 'justify-center',
8
+ 'gap-sm',
9
+ 'overflow-clip',
10
+ 'text-md',
11
+ 'font-semibold',
12
+ 'rounded-button-default',
13
+ 'cursor-pointer',
14
+ 'disabled:opacity-50',
15
+ 'disabled:cursor-not-allowed',
16
+ ];
17
+ const hierarchyStyles = {
18
+ primary: [
19
+ 'bg-bg-accent-strongest-alt',
20
+ 'text-text-primary_on-accent-strongest-alt',
21
+ 'hover:bg-bg-accent-strongest-alt_hover',
22
+ 'disabled:bg-bg-accent-strongest',
23
+ 'disabled:text-text-primary_on-accent-strongest-alt',
24
+ ],
25
+ secondary: [
26
+ 'bg-bg-primary',
27
+ 'inset-ring-2',
28
+ 'inset-ring-border-accent',
29
+ 'text-text-secondary',
30
+ 'hover:bg-bg-primary_hover',
31
+ 'hover:text-text-secondary_hover',
32
+ 'disabled:bg-bg-primary',
33
+ 'disabled:inset-ring-2',
34
+ 'disabled:inset-ring-border-primary',
35
+ 'disabled:text-text-secondary',
36
+ ],
37
+ tertiary: [
38
+ 'bg-bg-primary',
39
+ 'inset-ring-1',
40
+ 'inset-ring-border-accent',
41
+ 'text-text-secondary',
42
+ 'hover:bg-bg-primary_hover',
43
+ 'hover:text-text-secondary_hover',
44
+ 'disabled:bg-bg-primary',
45
+ 'disabled:inset-ring-1',
46
+ 'disabled:inset-ring-border-primary',
47
+ 'disabled:text-text-secondary',
48
+ ],
49
+ transparent: [
50
+ 'text-text-tertiary',
51
+ 'hover:bg-bg-primary_hover',
52
+ 'hover:text-text-tertiary_hover',
53
+ 'disabled:text-text-tertiary',
54
+ ],
55
+ };
56
+ const sizingStyles = {
57
+ xl: ['px-xl', 'py-lg'],
58
+ };
59
+ function ButtonWrapper({ type, href, disabled, className, onClick, children, }) {
60
+ const props = type === 'link'
61
+ ? {
62
+ href,
63
+ className,
64
+ onClick,
65
+ }
66
+ : {
67
+ type,
68
+ disabled,
69
+ className,
70
+ onClick,
71
+ };
72
+ return type === 'link' ? (jsx("a", { ...props, children: children })) : (jsx("button", { ...props, children: children }));
73
+ }
74
+ function Button({ hierarchy = 'primary', label, icon, type = 'button', disabled = false, size = 'xl', href, onClick, }) {
75
+ const defaultIconSize = 20;
76
+ const styles = hierarchyStyles[hierarchy];
77
+ const sizeStyles = sizingStyles[size];
78
+ let className = [...classNames, ...styles, ...sizeStyles].join(' ');
79
+ // Disable links if set to disabled.
80
+ if (disabled && type === 'link') {
81
+ className = className + ' pointer-events-none';
82
+ }
83
+ return (jsxs(ButtonWrapper, { type: type, href: href, disabled: disabled, className: className, onClick: onClick, children: [icon?.leading?.icon && (jsx(Icon, { icon: icon.leading.icon, size: icon?.leading?.size || defaultIconSize })), jsx("span", { children: label }), icon?.trailing?.icon && (jsx(Icon, { icon: icon.trailing.icon, size: icon?.trailing?.size || defaultIconSize }))] }));
84
+ }
85
+
86
+ export { Button as default };
87
+ //# sourceMappingURL=Button.js.map
package/components/button/Button.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sources":["../../../../components/button/Button.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon, { IIcon } from '../icons/Icon';\n\nexport type IButtonHierarchy =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'transparent';\n\nexport type IButton = {\n hierarchy?: IButtonHierarchy;\n label: string;\n size?: 'xl';\n type?: 'button' | 'reset' | 'submit' | 'link';\n href?: string;\n disabled?: boolean;\n icon?: {\n leading?: {\n icon: IIcon['icon'];\n size?: IIcon['size'];\n };\n trailing?: {\n icon: IIcon['icon'];\n size?: IIcon['size'];\n };\n };\n onClick?: (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>,\n ) => void;\n};\n\nconst classNames = [\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'gap-sm',\n 'overflow-clip',\n 'text-md',\n 'font-semibold',\n 'rounded-button-default',\n 'cursor-pointer',\n\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n];\n\nconst hierarchyStyles: Record<IButtonHierarchy, string[]> = {\n primary: [\n 'bg-bg-accent-strongest-alt',\n 'text-text-primary_on-accent-strongest-alt',\n 'hover:bg-bg-accent-strongest-alt_hover',\n 'disabled:bg-bg-accent-strongest',\n 'disabled:text-text-primary_on-accent-strongest-alt',\n ],\n secondary: [\n 'bg-bg-primary',\n 'inset-ring-2',\n 'inset-ring-border-accent',\n 'text-text-secondary',\n 'hover:bg-bg-primary_hover',\n 'hover:text-text-secondary_hover',\n 'disabled:bg-bg-primary',\n 'disabled:inset-ring-2',\n 'disabled:inset-ring-border-primary',\n 'disabled:text-text-secondary',\n ],\n tertiary: [\n 'bg-bg-primary',\n 'inset-ring-1',\n 'inset-ring-border-accent',\n 'text-text-secondary',\n 'hover:bg-bg-primary_hover',\n 'hover:text-text-secondary_hover',\n 'disabled:bg-bg-primary',\n 'disabled:inset-ring-1',\n 'disabled:inset-ring-border-primary',\n 'disabled:text-text-secondary',\n ],\n transparent: [\n 'text-text-tertiary',\n 'hover:bg-bg-primary_hover',\n 'hover:text-text-tertiary_hover',\n 'disabled:text-text-tertiary',\n ],\n};\n\nconst sizingStyles: Record<NonNullable<IButton['size']>, string[]> = {\n xl: ['px-xl', 'py-lg'],\n};\n\nfunction ButtonWrapper({\n type,\n href,\n disabled,\n className,\n onClick,\n children,\n}: {\n type: IButton['type'];\n href?: IButton['href'];\n disabled: IButton['disabled'];\n className: string;\n onClick: IButton['onClick'];\n children: ReactNode;\n}) {\n const props =\n type === 'link'\n ? {\n href,\n className,\n onClick,\n }\n : {\n type,\n disabled,\n className,\n onClick,\n };\n\n return type === 'link' ? (\n <a {...props}>{children}</a>\n ) : (\n <button {...props}>{children}</button>\n );\n}\n\nexport default function Button({\n hierarchy = 'primary',\n label,\n icon,\n type = 'button',\n disabled = false,\n size = 'xl',\n href,\n onClick,\n}: IButton) {\n const defaultIconSize = 20;\n const styles = hierarchyStyles[hierarchy];\n const sizeStyles = sizingStyles[size];\n\n let className = [...classNames, ...styles, ...sizeStyles].join(' ');\n\n // Disable links if set to disabled.\n if (disabled && type === 'link') {\n className = className + ' pointer-events-none';\n }\n\n return (\n <ButtonWrapper\n type={type}\n href={href}\n disabled={disabled}\n className={className}\n onClick={onClick}\n >\n {icon?.leading?.icon && (\n <Icon\n icon={icon.leading.icon}\n size={icon?.leading?.size || defaultIconSize}\n />\n )}\n {<span>{label}</span>}\n {icon?.trailing?.icon && (\n <Icon\n icon={icon.trailing.icon}\n size={icon?.trailing?.size || defaultIconSize}\n />\n )}\n </ButtonWrapper>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/components/button/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Button from './Button';
2
+ export { Button };
package/components/button/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as Button } from './Button.js';
2
+ //# sourceMappingURL=index.js.map
package/components/button/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redgate/brand-web-toolkit",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "Web toolkit for the Redgate Brand design system",
5
5
  "main": "components/index.js",
6
6
  "module": "components/index.js",
package/tailwindcss/pass.css CHANGED
@@ -8,6 +8,7 @@
8
8
  "Courier New", monospace;
9
9
  --text-xl: 20px;
10
10
  --text-xl--line-height: var(--line-height-10);
11
+ --font-weight-semibold: 600;
11
12
  --font-weight-bold: 700;
12
13
  --default-font-family: var(--font-family-body);
13
14
  --default-mono-font-family: var(--font-mono);
@@ -107,6 +108,9 @@
107
108
  --spacing-360: 1440px;
108
109
  --spacing-400: 1600px;
109
110
  --spacing-480: 1920px;
111
+ --spacing-sm: var(--spacing-1-5);
112
+ --spacing-lg: var(--spacing-3);
113
+ --spacing-xl: var(--spacing-4);
110
114
  --radius-xxs: 2px;
111
115
  --radius-xs: 4px;
112
116
  --radius-sm: 6px;
@@ -150,7 +154,13 @@
150
154
  --fluid-line-height-max-16: 72;
151
155
  --fluid-line-height-min-17: 48;
152
156
  --fluid-line-height-max-17: 80;
157
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
153
158
  --color-text-secondary: var(--color-indigo-400);
159
+ --color-text-secondary_hover: var(--color-indigo-700);
160
+ --color-text-tertiary: var(--color-indigo-400);
161
+ --color-text-tertiary_hover: var(--color-indigo-600);
162
+ --color-border-primary: var(--color-indigo-300);
163
+ --color-border-accent: var(--color-pass-pink);
154
164
  --color-fg-accent-primary: var(--color-indigo-600);
155
165
  --color-fg-accent-secondary: var(--color-indigo-500);
156
166
  --color-fg-error-secondary: var(--color-red-500);
@@ -158,10 +168,15 @@
158
168
  --color-fg-success-secondary: var(--color-green-500);
159
169
  --color-fg-info-secondary: var(--color-blue-500);
160
170
  --color-bg-primary: var(--color-white);
171
+ --color-bg-primary_hover: var(--color-gray-50);
161
172
  --color-bg-secondary: var(--color-gray-50);
162
173
  --color-bg-tertiary: var(--color-gray-100);
174
+ --color-bg-accent-strongest: var(--color-pass-yellow);
175
+ --color-bg-accent-strongest-alt: var(--color-indigo-400);
176
+ --color-bg-accent-strongest-alt_hover: var(--color-indigo-400);
163
177
  --default-font-color: var(--color-text-secondary);
164
178
  --default-background-color: var(--color-bg-primary);
179
+ --radius-button-default: var(--radius-full);
165
180
  --font-family-display: 'Kanit', sans-serif;
166
181
  --font-family-body: 'Kanit', sans-serif;
167
182
  }
@@ -315,6 +330,9 @@
315
330
  }
316
331
  }
317
332
  @layer utilities {
333
+ .pointer-events-none {
334
+ pointer-events: none;
335
+ }
318
336
  .static {
319
337
  position: static;
320
338
  }
@@ -351,21 +369,45 @@
351
369
  .inline {
352
370
  display: inline;
353
371
  }
372
+ .inline-flex {
373
+ display: inline-flex;
374
+ }
375
+ .table {
376
+ display: table;
377
+ }
354
378
  .grow {
355
379
  flex-grow: 1;
356
380
  }
357
381
  .transform {
358
382
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
359
383
  }
384
+ .cursor-pointer {
385
+ cursor: pointer;
386
+ }
360
387
  .flex-col {
361
388
  flex-direction: column;
362
389
  }
390
+ .items-center {
391
+ align-items: center;
392
+ }
363
393
  .items-start {
364
394
  align-items: flex-start;
365
395
  }
396
+ .justify-center {
397
+ justify-content: center;
398
+ }
366
399
  .gap-5 {
367
400
  gap: var(--spacing-5);
368
401
  }
402
+ .gap-sm {
403
+ gap: var(--spacing-sm);
404
+ }
405
+ .overflow-clip {
406
+ overflow: clip;
407
+ }
408
+ .rounded-button-default {
409
+ border-radius: var(--radius-button-default);
410
+ }
369
411
  .border {
370
412
  border-style: var(--tw-border-style);
371
413
  border-width: 1px;
@@ -386,16 +428,36 @@
386
428
  .border-fg-warning-secondary {
387
429
  border-color: var(--color-fg-warning-secondary);
388
430
  }
431
+ .bg-bg-accent-strongest-alt {
432
+ background-color: var(--color-bg-accent-strongest-alt);
433
+ }
434
+ .bg-bg-primary {
435
+ background-color: var(--color-bg-primary);
436
+ }
389
437
  .bg-bg-secondary {
390
438
  background-color: var(--color-bg-secondary);
391
439
  }
392
440
  .p-5 {
393
441
  padding: var(--spacing-5);
394
442
  }
443
+ .px-xl {
444
+ padding-inline: var(--spacing-xl);
445
+ }
446
+ .py-lg {
447
+ padding-block: var(--spacing-lg);
448
+ }
449
+ .text-md {
450
+ font-size: var(--text-md);
451
+ line-height: var(--tw-leading, var(--text-md--line-height));
452
+ }
395
453
  .font-bold {
396
454
  --tw-font-weight: var(--font-weight-bold);
397
455
  font-weight: var(--font-weight-bold);
398
456
  }
457
+ .font-semibold {
458
+ --tw-font-weight: var(--font-weight-semibold);
459
+ font-weight: var(--font-weight-semibold);
460
+ }
399
461
  .text-fg-error-secondary {
400
462
  color: var(--color-fg-error-secondary);
401
463
  }
@@ -408,9 +470,109 @@
408
470
  .text-fg-warning-secondary {
409
471
  color: var(--color-fg-warning-secondary);
410
472
  }
473
+ .text-text-primary_on-accent-strongest-alt {
474
+ color: var(--color-text-primary_on-accent-strongest-alt);
475
+ }
476
+ .text-text-secondary {
477
+ color: var(--color-text-secondary);
478
+ }
479
+ .text-text-tertiary {
480
+ color: var(--color-text-tertiary);
481
+ }
411
482
  .lowercase {
412
483
  text-transform: lowercase;
413
484
  }
485
+ .inset-ring-1 {
486
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
487
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
488
+ }
489
+ .inset-ring-2 {
490
+ --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
491
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
492
+ }
493
+ .inset-ring-border-accent {
494
+ --tw-inset-ring-color: var(--color-border-accent);
495
+ }
496
+ .hover\:bg-bg-accent-strongest-alt_hover {
497
+ &:hover {
498
+ @media (hover: hover) {
499
+ background-color: var(--color-bg-accent-strongest-alt_hover);
500
+ }
501
+ }
502
+ }
503
+ .hover\:bg-bg-primary_hover {
504
+ &:hover {
505
+ @media (hover: hover) {
506
+ background-color: var(--color-bg-primary_hover);
507
+ }
508
+ }
509
+ }
510
+ .hover\:text-text-secondary_hover {
511
+ &:hover {
512
+ @media (hover: hover) {
513
+ color: var(--color-text-secondary_hover);
514
+ }
515
+ }
516
+ }
517
+ .hover\:text-text-tertiary_hover {
518
+ &:hover {
519
+ @media (hover: hover) {
520
+ color: var(--color-text-tertiary_hover);
521
+ }
522
+ }
523
+ }
524
+ .disabled\:cursor-not-allowed {
525
+ &:disabled {
526
+ cursor: not-allowed;
527
+ }
528
+ }
529
+ .disabled\:bg-bg-accent-strongest {
530
+ &:disabled {
531
+ background-color: var(--color-bg-accent-strongest);
532
+ }
533
+ }
534
+ .disabled\:bg-bg-primary {
535
+ &:disabled {
536
+ background-color: var(--color-bg-primary);
537
+ }
538
+ }
539
+ .disabled\:text-text-primary_on-accent-strongest-alt {
540
+ &:disabled {
541
+ color: var(--color-text-primary_on-accent-strongest-alt);
542
+ }
543
+ }
544
+ .disabled\:text-text-secondary {
545
+ &:disabled {
546
+ color: var(--color-text-secondary);
547
+ }
548
+ }
549
+ .disabled\:text-text-tertiary {
550
+ &:disabled {
551
+ color: var(--color-text-tertiary);
552
+ }
553
+ }
554
+ .disabled\:opacity-50 {
555
+ &:disabled {
556
+ opacity: 50%;
557
+ }
558
+ }
559
+ .disabled\:inset-ring-1 {
560
+ &:disabled {
561
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
562
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
563
+ }
564
+ }
565
+ .disabled\:inset-ring-2 {
566
+ &:disabled {
567
+ --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
568
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
569
+ }
570
+ }
571
+ .disabled\:inset-ring-border-primary {
572
+ &:disabled {
573
+ --tw-inset-ring-color: var(--color-border-primary);
574
+ }
575
+ }
414
576
  }
415
577
  @layer base {
416
578
  html, :host {
@@ -626,6 +788,71 @@
626
788
  syntax: "*";
627
789
  inherits: false;
628
790
  }
791
+ @property --tw-shadow {
792
+ syntax: "*";
793
+ inherits: false;
794
+ initial-value: 0 0 #0000;
795
+ }
796
+ @property --tw-shadow-color {
797
+ syntax: "*";
798
+ inherits: false;
799
+ }
800
+ @property --tw-shadow-alpha {
801
+ syntax: "<percentage>";
802
+ inherits: false;
803
+ initial-value: 100%;
804
+ }
805
+ @property --tw-inset-shadow {
806
+ syntax: "*";
807
+ inherits: false;
808
+ initial-value: 0 0 #0000;
809
+ }
810
+ @property --tw-inset-shadow-color {
811
+ syntax: "*";
812
+ inherits: false;
813
+ }
814
+ @property --tw-inset-shadow-alpha {
815
+ syntax: "<percentage>";
816
+ inherits: false;
817
+ initial-value: 100%;
818
+ }
819
+ @property --tw-ring-color {
820
+ syntax: "*";
821
+ inherits: false;
822
+ }
823
+ @property --tw-ring-shadow {
824
+ syntax: "*";
825
+ inherits: false;
826
+ initial-value: 0 0 #0000;
827
+ }
828
+ @property --tw-inset-ring-color {
829
+ syntax: "*";
830
+ inherits: false;
831
+ }
832
+ @property --tw-inset-ring-shadow {
833
+ syntax: "*";
834
+ inherits: false;
835
+ initial-value: 0 0 #0000;
836
+ }
837
+ @property --tw-ring-inset {
838
+ syntax: "*";
839
+ inherits: false;
840
+ }
841
+ @property --tw-ring-offset-width {
842
+ syntax: "<length>";
843
+ inherits: false;
844
+ initial-value: 0px;
845
+ }
846
+ @property --tw-ring-offset-color {
847
+ syntax: "*";
848
+ inherits: false;
849
+ initial-value: #fff;
850
+ }
851
+ @property --tw-ring-offset-shadow {
852
+ syntax: "*";
853
+ inherits: false;
854
+ initial-value: 0 0 #0000;
855
+ }
629
856
  @layer properties {
630
857
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
631
858
  *, ::before, ::after, ::backdrop {
@@ -636,6 +863,20 @@
636
863
  --tw-skew-y: initial;
637
864
  --tw-border-style: solid;
638
865
  --tw-font-weight: initial;
866
+ --tw-shadow: 0 0 #0000;
867
+ --tw-shadow-color: initial;
868
+ --tw-shadow-alpha: 100%;
869
+ --tw-inset-shadow: 0 0 #0000;
870
+ --tw-inset-shadow-color: initial;
871
+ --tw-inset-shadow-alpha: 100%;
872
+ --tw-ring-color: initial;
873
+ --tw-ring-shadow: 0 0 #0000;
874
+ --tw-inset-ring-color: initial;
875
+ --tw-inset-ring-shadow: 0 0 #0000;
876
+ --tw-ring-inset: initial;
877
+ --tw-ring-offset-width: 0px;
878
+ --tw-ring-offset-color: #fff;
879
+ --tw-ring-offset-shadow: 0 0 #0000;
639
880
  }
640
881
  }
641
882
  }
package/tailwindcss/redgate.css CHANGED
@@ -8,6 +8,7 @@
8
8
  "Courier New", monospace;
9
9
  --text-xl: 20px;
10
10
  --text-xl--line-height: var(--line-height-10);
11
+ --font-weight-semibold: 600;
11
12
  --font-weight-bold: 700;
12
13
  --default-font-family: var(--font-family-body);
13
14
  --default-mono-font-family: var(--font-mono);
@@ -107,6 +108,9 @@
107
108
  --spacing-360: 1440px;
108
109
  --spacing-400: 1600px;
109
110
  --spacing-480: 1920px;
111
+ --spacing-sm: var(--spacing-1-5);
112
+ --spacing-lg: var(--spacing-3);
113
+ --spacing-xl: var(--spacing-4);
110
114
  --radius-xxs: 2px;
111
115
  --radius-xs: 4px;
112
116
  --radius-sm: 6px;
@@ -150,7 +154,13 @@
150
154
  --fluid-line-height-max-16: 72;
151
155
  --fluid-line-height-min-17: 48;
152
156
  --fluid-line-height-max-17: 80;
157
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
153
158
  --color-text-secondary: var(--color-gray-700);
159
+ --color-text-secondary_hover: var(--color-gray-950);
160
+ --color-text-tertiary: var(--color-gray-600);
161
+ --color-text-tertiary_hover: var(--color-gray-700);
162
+ --color-border-primary: var(--color-gray-500);
163
+ --color-border-accent: var(--color-red-600);
154
164
  --color-fg-accent-primary: var(--color-red-600);
155
165
  --color-fg-accent-secondary: var(--color-red-500);
156
166
  --color-fg-error-secondary: var(--color-red-500);
@@ -158,10 +168,15 @@
158
168
  --color-fg-success-secondary: var(--color-green-500);
159
169
  --color-fg-info-secondary: var(--color-blue-500);
160
170
  --color-bg-primary: var(--color-white);
171
+ --color-bg-primary_hover: var(--color-gray-50);
161
172
  --color-bg-secondary: var(--color-gray-50);
162
173
  --color-bg-tertiary: var(--color-gray-100);
174
+ --color-bg-accent-strongest: var(--color-red-600);
175
+ --color-bg-accent-strongest-alt: var(--color-red-600);
176
+ --color-bg-accent-strongest-alt_hover: var(--color-red-700);
163
177
  --default-font-color: var(--color-text-secondary);
164
178
  --default-background-color: var(--color-bg-primary);
179
+ --radius-button-default: var(--radius-sm);
165
180
  --font-family-display: 'Gatebase', sans-serif;
166
181
  --font-family-body: 'Roboto', sans-serif;
167
182
  }
@@ -315,6 +330,9 @@
315
330
  }
316
331
  }
317
332
  @layer utilities {
333
+ .pointer-events-none {
334
+ pointer-events: none;
335
+ }
318
336
  .static {
319
337
  position: static;
320
338
  }
@@ -351,21 +369,45 @@
351
369
  .inline {
352
370
  display: inline;
353
371
  }
372
+ .inline-flex {
373
+ display: inline-flex;
374
+ }
375
+ .table {
376
+ display: table;
377
+ }
354
378
  .grow {
355
379
  flex-grow: 1;
356
380
  }
357
381
  .transform {
358
382
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
359
383
  }
384
+ .cursor-pointer {
385
+ cursor: pointer;
386
+ }
360
387
  .flex-col {
361
388
  flex-direction: column;
362
389
  }
390
+ .items-center {
391
+ align-items: center;
392
+ }
363
393
  .items-start {
364
394
  align-items: flex-start;
365
395
  }
396
+ .justify-center {
397
+ justify-content: center;
398
+ }
366
399
  .gap-5 {
367
400
  gap: var(--spacing-5);
368
401
  }
402
+ .gap-sm {
403
+ gap: var(--spacing-sm);
404
+ }
405
+ .overflow-clip {
406
+ overflow: clip;
407
+ }
408
+ .rounded-button-default {
409
+ border-radius: var(--radius-button-default);
410
+ }
369
411
  .border {
370
412
  border-style: var(--tw-border-style);
371
413
  border-width: 1px;
@@ -386,16 +428,36 @@
386
428
  .border-fg-warning-secondary {
387
429
  border-color: var(--color-fg-warning-secondary);
388
430
  }
431
+ .bg-bg-accent-strongest-alt {
432
+ background-color: var(--color-bg-accent-strongest-alt);
433
+ }
434
+ .bg-bg-primary {
435
+ background-color: var(--color-bg-primary);
436
+ }
389
437
  .bg-bg-secondary {
390
438
  background-color: var(--color-bg-secondary);
391
439
  }
392
440
  .p-5 {
393
441
  padding: var(--spacing-5);
394
442
  }
443
+ .px-xl {
444
+ padding-inline: var(--spacing-xl);
445
+ }
446
+ .py-lg {
447
+ padding-block: var(--spacing-lg);
448
+ }
449
+ .text-md {
450
+ font-size: var(--text-md);
451
+ line-height: var(--tw-leading, var(--text-md--line-height));
452
+ }
395
453
  .font-bold {
396
454
  --tw-font-weight: var(--font-weight-bold);
397
455
  font-weight: var(--font-weight-bold);
398
456
  }
457
+ .font-semibold {
458
+ --tw-font-weight: var(--font-weight-semibold);
459
+ font-weight: var(--font-weight-semibold);
460
+ }
399
461
  .text-fg-error-secondary {
400
462
  color: var(--color-fg-error-secondary);
401
463
  }
@@ -408,9 +470,109 @@
408
470
  .text-fg-warning-secondary {
409
471
  color: var(--color-fg-warning-secondary);
410
472
  }
473
+ .text-text-primary_on-accent-strongest-alt {
474
+ color: var(--color-text-primary_on-accent-strongest-alt);
475
+ }
476
+ .text-text-secondary {
477
+ color: var(--color-text-secondary);
478
+ }
479
+ .text-text-tertiary {
480
+ color: var(--color-text-tertiary);
481
+ }
411
482
  .lowercase {
412
483
  text-transform: lowercase;
413
484
  }
485
+ .inset-ring-1 {
486
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
487
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
488
+ }
489
+ .inset-ring-2 {
490
+ --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
491
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
492
+ }
493
+ .inset-ring-border-accent {
494
+ --tw-inset-ring-color: var(--color-border-accent);
495
+ }
496
+ .hover\:bg-bg-accent-strongest-alt_hover {
497
+ &:hover {
498
+ @media (hover: hover) {
499
+ background-color: var(--color-bg-accent-strongest-alt_hover);
500
+ }
501
+ }
502
+ }
503
+ .hover\:bg-bg-primary_hover {
504
+ &:hover {
505
+ @media (hover: hover) {
506
+ background-color: var(--color-bg-primary_hover);
507
+ }
508
+ }
509
+ }
510
+ .hover\:text-text-secondary_hover {
511
+ &:hover {
512
+ @media (hover: hover) {
513
+ color: var(--color-text-secondary_hover);
514
+ }
515
+ }
516
+ }
517
+ .hover\:text-text-tertiary_hover {
518
+ &:hover {
519
+ @media (hover: hover) {
520
+ color: var(--color-text-tertiary_hover);
521
+ }
522
+ }
523
+ }
524
+ .disabled\:cursor-not-allowed {
525
+ &:disabled {
526
+ cursor: not-allowed;
527
+ }
528
+ }
529
+ .disabled\:bg-bg-accent-strongest {
530
+ &:disabled {
531
+ background-color: var(--color-bg-accent-strongest);
532
+ }
533
+ }
534
+ .disabled\:bg-bg-primary {
535
+ &:disabled {
536
+ background-color: var(--color-bg-primary);
537
+ }
538
+ }
539
+ .disabled\:text-text-primary_on-accent-strongest-alt {
540
+ &:disabled {
541
+ color: var(--color-text-primary_on-accent-strongest-alt);
542
+ }
543
+ }
544
+ .disabled\:text-text-secondary {
545
+ &:disabled {
546
+ color: var(--color-text-secondary);
547
+ }
548
+ }
549
+ .disabled\:text-text-tertiary {
550
+ &:disabled {
551
+ color: var(--color-text-tertiary);
552
+ }
553
+ }
554
+ .disabled\:opacity-50 {
555
+ &:disabled {
556
+ opacity: 50%;
557
+ }
558
+ }
559
+ .disabled\:inset-ring-1 {
560
+ &:disabled {
561
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
562
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
563
+ }
564
+ }
565
+ .disabled\:inset-ring-2 {
566
+ &:disabled {
567
+ --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
568
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
569
+ }
570
+ }
571
+ .disabled\:inset-ring-border-primary {
572
+ &:disabled {
573
+ --tw-inset-ring-color: var(--color-border-primary);
574
+ }
575
+ }
414
576
  }
415
577
  @font-face {
416
578
  font-family: Gatebase;
@@ -629,6 +791,71 @@
629
791
  syntax: "*";
630
792
  inherits: false;
631
793
  }
794
+ @property --tw-shadow {
795
+ syntax: "*";
796
+ inherits: false;
797
+ initial-value: 0 0 #0000;
798
+ }
799
+ @property --tw-shadow-color {
800
+ syntax: "*";
801
+ inherits: false;
802
+ }
803
+ @property --tw-shadow-alpha {
804
+ syntax: "<percentage>";
805
+ inherits: false;
806
+ initial-value: 100%;
807
+ }
808
+ @property --tw-inset-shadow {
809
+ syntax: "*";
810
+ inherits: false;
811
+ initial-value: 0 0 #0000;
812
+ }
813
+ @property --tw-inset-shadow-color {
814
+ syntax: "*";
815
+ inherits: false;
816
+ }
817
+ @property --tw-inset-shadow-alpha {
818
+ syntax: "<percentage>";
819
+ inherits: false;
820
+ initial-value: 100%;
821
+ }
822
+ @property --tw-ring-color {
823
+ syntax: "*";
824
+ inherits: false;
825
+ }
826
+ @property --tw-ring-shadow {
827
+ syntax: "*";
828
+ inherits: false;
829
+ initial-value: 0 0 #0000;
830
+ }
831
+ @property --tw-inset-ring-color {
832
+ syntax: "*";
833
+ inherits: false;
834
+ }
835
+ @property --tw-inset-ring-shadow {
836
+ syntax: "*";
837
+ inherits: false;
838
+ initial-value: 0 0 #0000;
839
+ }
840
+ @property --tw-ring-inset {
841
+ syntax: "*";
842
+ inherits: false;
843
+ }
844
+ @property --tw-ring-offset-width {
845
+ syntax: "<length>";
846
+ inherits: false;
847
+ initial-value: 0px;
848
+ }
849
+ @property --tw-ring-offset-color {
850
+ syntax: "*";
851
+ inherits: false;
852
+ initial-value: #fff;
853
+ }
854
+ @property --tw-ring-offset-shadow {
855
+ syntax: "*";
856
+ inherits: false;
857
+ initial-value: 0 0 #0000;
858
+ }
632
859
  @layer properties {
633
860
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
634
861
  *, ::before, ::after, ::backdrop {
@@ -639,6 +866,20 @@
639
866
  --tw-skew-y: initial;
640
867
  --tw-border-style: solid;
641
868
  --tw-font-weight: initial;
869
+ --tw-shadow: 0 0 #0000;
870
+ --tw-shadow-color: initial;
871
+ --tw-shadow-alpha: 100%;
872
+ --tw-inset-shadow: 0 0 #0000;
873
+ --tw-inset-shadow-color: initial;
874
+ --tw-inset-shadow-alpha: 100%;
875
+ --tw-ring-color: initial;
876
+ --tw-ring-shadow: 0 0 #0000;
877
+ --tw-inset-ring-color: initial;
878
+ --tw-inset-ring-shadow: 0 0 #0000;
879
+ --tw-ring-inset: initial;
880
+ --tw-ring-offset-width: 0px;
881
+ --tw-ring-offset-color: #fff;
882
+ --tw-ring-offset-shadow: 0 0 #0000;
642
883
  }
643
884
  }
644
885
  }
package/tailwindcss/sql-server-central.css CHANGED
@@ -8,6 +8,7 @@
8
8
  "Courier New", monospace;
9
9
  --text-xl: 20px;
10
10
  --text-xl--line-height: var(--line-height-10);
11
+ --font-weight-semibold: 600;
11
12
  --font-weight-bold: 700;
12
13
  --default-font-family: var(--font-family-body);
13
14
  --default-mono-font-family: var(--font-mono);
@@ -107,6 +108,9 @@
107
108
  --spacing-360: 1440px;
108
109
  --spacing-400: 1600px;
109
110
  --spacing-480: 1920px;
111
+ --spacing-sm: var(--spacing-1-5);
112
+ --spacing-lg: var(--spacing-3);
113
+ --spacing-xl: var(--spacing-4);
110
114
  --radius-xxs: 2px;
111
115
  --radius-xs: 4px;
112
116
  --radius-sm: 6px;
@@ -150,7 +154,13 @@
150
154
  --fluid-line-height-max-16: 72;
151
155
  --fluid-line-height-min-17: 48;
152
156
  --fluid-line-height-max-17: 80;
157
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
153
158
  --color-text-secondary: var(--color-gray-700);
159
+ --color-text-secondary_hover: var(--color-gray-950);
160
+ --color-text-tertiary: var(--color-gray-600);
161
+ --color-text-tertiary_hover: var(--color-gray-700);
162
+ --color-border-primary: var(--color-gray-500);
163
+ --color-border-accent: var(--color-blue-600);
154
164
  --color-fg-accent-primary: var(--color-blue-600);
155
165
  --color-fg-accent-secondary: var(--color-blue-500);
156
166
  --color-fg-error-secondary: var(--color-red-500);
@@ -158,10 +168,15 @@
158
168
  --color-fg-success-secondary: var(--color-green-500);
159
169
  --color-fg-info-secondary: var(--color-blue-500);
160
170
  --color-bg-primary: var(--color-white);
171
+ --color-bg-primary_hover: var(--color-gray-50);
161
172
  --color-bg-secondary: var(--color-gray-50);
162
173
  --color-bg-tertiary: var(--color-gray-100);
174
+ --color-bg-accent-strongest: var(--color-yellow-200);
175
+ --color-bg-accent-strongest-alt: var(--color-blue-600);
176
+ --color-bg-accent-strongest-alt_hover: var(--color-blue-700);
163
177
  --default-font-color: var(--color-text-secondary);
164
178
  --default-background-color: var(--color-bg-primary);
179
+ --radius-button-default: var(--radius-xs);
165
180
  --font-family-display: 'Roboto', sans-serif;
166
181
  --font-family-body: 'Roboto', sans-serif;
167
182
  }
@@ -315,6 +330,9 @@
315
330
  }
316
331
  }
317
332
  @layer utilities {
333
+ .pointer-events-none {
334
+ pointer-events: none;
335
+ }
318
336
  .static {
319
337
  position: static;
320
338
  }
@@ -351,21 +369,45 @@
351
369
  .inline {
352
370
  display: inline;
353
371
  }
372
+ .inline-flex {
373
+ display: inline-flex;
374
+ }
375
+ .table {
376
+ display: table;
377
+ }
354
378
  .grow {
355
379
  flex-grow: 1;
356
380
  }
357
381
  .transform {
358
382
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
359
383
  }
384
+ .cursor-pointer {
385
+ cursor: pointer;
386
+ }
360
387
  .flex-col {
361
388
  flex-direction: column;
362
389
  }
390
+ .items-center {
391
+ align-items: center;
392
+ }
363
393
  .items-start {
364
394
  align-items: flex-start;
365
395
  }
396
+ .justify-center {
397
+ justify-content: center;
398
+ }
366
399
  .gap-5 {
367
400
  gap: var(--spacing-5);
368
401
  }
402
+ .gap-sm {
403
+ gap: var(--spacing-sm);
404
+ }
405
+ .overflow-clip {
406
+ overflow: clip;
407
+ }
408
+ .rounded-button-default {
409
+ border-radius: var(--radius-button-default);
410
+ }
369
411
  .border {
370
412
  border-style: var(--tw-border-style);
371
413
  border-width: 1px;
@@ -386,16 +428,36 @@
386
428
  .border-fg-warning-secondary {
387
429
  border-color: var(--color-fg-warning-secondary);
388
430
  }
431
+ .bg-bg-accent-strongest-alt {
432
+ background-color: var(--color-bg-accent-strongest-alt);
433
+ }
434
+ .bg-bg-primary {
435
+ background-color: var(--color-bg-primary);
436
+ }
389
437
  .bg-bg-secondary {
390
438
  background-color: var(--color-bg-secondary);
391
439
  }
392
440
  .p-5 {
393
441
  padding: var(--spacing-5);
394
442
  }
443
+ .px-xl {
444
+ padding-inline: var(--spacing-xl);
445
+ }
446
+ .py-lg {
447
+ padding-block: var(--spacing-lg);
448
+ }
449
+ .text-md {
450
+ font-size: var(--text-md);
451
+ line-height: var(--tw-leading, var(--text-md--line-height));
452
+ }
395
453
  .font-bold {
396
454
  --tw-font-weight: var(--font-weight-bold);
397
455
  font-weight: var(--font-weight-bold);
398
456
  }
457
+ .font-semibold {
458
+ --tw-font-weight: var(--font-weight-semibold);
459
+ font-weight: var(--font-weight-semibold);
460
+ }
399
461
  .text-fg-error-secondary {
400
462
  color: var(--color-fg-error-secondary);
401
463
  }
@@ -408,9 +470,109 @@
408
470
  .text-fg-warning-secondary {
409
471
  color: var(--color-fg-warning-secondary);
410
472
  }
473
+ .text-text-primary_on-accent-strongest-alt {
474
+ color: var(--color-text-primary_on-accent-strongest-alt);
475
+ }
476
+ .text-text-secondary {
477
+ color: var(--color-text-secondary);
478
+ }
479
+ .text-text-tertiary {
480
+ color: var(--color-text-tertiary);
481
+ }
411
482
  .lowercase {
412
483
  text-transform: lowercase;
413
484
  }
485
+ .inset-ring-1 {
486
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
487
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
488
+ }
489
+ .inset-ring-2 {
490
+ --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
491
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
492
+ }
493
+ .inset-ring-border-accent {
494
+ --tw-inset-ring-color: var(--color-border-accent);
495
+ }
496
+ .hover\:bg-bg-accent-strongest-alt_hover {
497
+ &:hover {
498
+ @media (hover: hover) {
499
+ background-color: var(--color-bg-accent-strongest-alt_hover);
500
+ }
501
+ }
502
+ }
503
+ .hover\:bg-bg-primary_hover {
504
+ &:hover {
505
+ @media (hover: hover) {
506
+ background-color: var(--color-bg-primary_hover);
507
+ }
508
+ }
509
+ }
510
+ .hover\:text-text-secondary_hover {
511
+ &:hover {
512
+ @media (hover: hover) {
513
+ color: var(--color-text-secondary_hover);
514
+ }
515
+ }
516
+ }
517
+ .hover\:text-text-tertiary_hover {
518
+ &:hover {
519
+ @media (hover: hover) {
520
+ color: var(--color-text-tertiary_hover);
521
+ }
522
+ }
523
+ }
524
+ .disabled\:cursor-not-allowed {
525
+ &:disabled {
526
+ cursor: not-allowed;
527
+ }
528
+ }
529
+ .disabled\:bg-bg-accent-strongest {
530
+ &:disabled {
531
+ background-color: var(--color-bg-accent-strongest);
532
+ }
533
+ }
534
+ .disabled\:bg-bg-primary {
535
+ &:disabled {
536
+ background-color: var(--color-bg-primary);
537
+ }
538
+ }
539
+ .disabled\:text-text-primary_on-accent-strongest-alt {
540
+ &:disabled {
541
+ color: var(--color-text-primary_on-accent-strongest-alt);
542
+ }
543
+ }
544
+ .disabled\:text-text-secondary {
545
+ &:disabled {
546
+ color: var(--color-text-secondary);
547
+ }
548
+ }
549
+ .disabled\:text-text-tertiary {
550
+ &:disabled {
551
+ color: var(--color-text-tertiary);
552
+ }
553
+ }
554
+ .disabled\:opacity-50 {
555
+ &:disabled {
556
+ opacity: 50%;
557
+ }
558
+ }
559
+ .disabled\:inset-ring-1 {
560
+ &:disabled {
561
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
562
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
563
+ }
564
+ }
565
+ .disabled\:inset-ring-2 {
566
+ &:disabled {
567
+ --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
568
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
569
+ }
570
+ }
571
+ .disabled\:inset-ring-border-primary {
572
+ &:disabled {
573
+ --tw-inset-ring-color: var(--color-border-primary);
574
+ }
575
+ }
414
576
  }
415
577
  @layer base {
416
578
  html, :host {
@@ -624,6 +786,71 @@
624
786
  syntax: "*";
625
787
  inherits: false;
626
788
  }
789
+ @property --tw-shadow {
790
+ syntax: "*";
791
+ inherits: false;
792
+ initial-value: 0 0 #0000;
793
+ }
794
+ @property --tw-shadow-color {
795
+ syntax: "*";
796
+ inherits: false;
797
+ }
798
+ @property --tw-shadow-alpha {
799
+ syntax: "<percentage>";
800
+ inherits: false;
801
+ initial-value: 100%;
802
+ }
803
+ @property --tw-inset-shadow {
804
+ syntax: "*";
805
+ inherits: false;
806
+ initial-value: 0 0 #0000;
807
+ }
808
+ @property --tw-inset-shadow-color {
809
+ syntax: "*";
810
+ inherits: false;
811
+ }
812
+ @property --tw-inset-shadow-alpha {
813
+ syntax: "<percentage>";
814
+ inherits: false;
815
+ initial-value: 100%;
816
+ }
817
+ @property --tw-ring-color {
818
+ syntax: "*";
819
+ inherits: false;
820
+ }
821
+ @property --tw-ring-shadow {
822
+ syntax: "*";
823
+ inherits: false;
824
+ initial-value: 0 0 #0000;
825
+ }
826
+ @property --tw-inset-ring-color {
827
+ syntax: "*";
828
+ inherits: false;
829
+ }
830
+ @property --tw-inset-ring-shadow {
831
+ syntax: "*";
832
+ inherits: false;
833
+ initial-value: 0 0 #0000;
834
+ }
835
+ @property --tw-ring-inset {
836
+ syntax: "*";
837
+ inherits: false;
838
+ }
839
+ @property --tw-ring-offset-width {
840
+ syntax: "<length>";
841
+ inherits: false;
842
+ initial-value: 0px;
843
+ }
844
+ @property --tw-ring-offset-color {
845
+ syntax: "*";
846
+ inherits: false;
847
+ initial-value: #fff;
848
+ }
849
+ @property --tw-ring-offset-shadow {
850
+ syntax: "*";
851
+ inherits: false;
852
+ initial-value: 0 0 #0000;
853
+ }
627
854
  @layer properties {
628
855
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
629
856
  *, ::before, ::after, ::backdrop {
@@ -634,6 +861,20 @@
634
861
  --tw-skew-y: initial;
635
862
  --tw-border-style: solid;
636
863
  --tw-font-weight: initial;
864
+ --tw-shadow: 0 0 #0000;
865
+ --tw-shadow-color: initial;
866
+ --tw-shadow-alpha: 100%;
867
+ --tw-inset-shadow: 0 0 #0000;
868
+ --tw-inset-shadow-color: initial;
869
+ --tw-inset-shadow-alpha: 100%;
870
+ --tw-ring-color: initial;
871
+ --tw-ring-shadow: 0 0 #0000;
872
+ --tw-inset-ring-color: initial;
873
+ --tw-inset-ring-shadow: 0 0 #0000;
874
+ --tw-ring-inset: initial;
875
+ --tw-ring-offset-width: 0px;
876
+ --tw-ring-offset-color: #fff;
877
+ --tw-ring-offset-shadow: 0 0 #0000;
637
878
  }
638
879
  }
639
880
  }