@redgate/brand-web-toolkit 0.0.6 → 0.0.8

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 (13) hide show
  1. package/components/notification/Notification.d.ts +7 -0
  2. package/components/notification/Notification.js +39 -0
  3. package/components/notification/Notification.js.map +1 -0
  4. package/components/notification/index.d.ts +2 -0
  5. package/components/notification/index.js +2 -0
  6. package/components/notification/index.js.map +1 -0
  7. package/package.json +1 -1
  8. package/tailwindcss/pass.css +84 -5
  9. package/tailwindcss/redgate.css +78 -3
  10. package/tailwindcss/sql-server-central.css +81 -4
  11. package/tailwindcss/src/pass/input.css +71 -64
  12. package/tailwindcss/src/redgate/input.css +10 -6
  13. package/tailwindcss/src/sql-server-central/input.css +36 -31
package/components/notification/Notification.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { IIcon } from '../icons/Icon';
2
+ export type INotification = {
3
+ type: 'info' | 'fail' | 'success' | 'warning';
4
+ icon?: boolean | IIcon['icon'];
5
+ children: React.ReactElement;
6
+ };
7
+ export default function Notification({ type, icon, children }: INotification): import("react/jsx-runtime").JSX.Element;
package/components/notification/Notification.js ADDED
@@ -0,0 +1,39 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import Icon from '../icons/Icon.js';
3
+
4
+ function NotificationIcon({ type, icon, }) {
5
+ if (icon === false || icon === undefined) {
6
+ return null;
7
+ }
8
+ const defaultIcon = {
9
+ info: 'PlusCircle',
10
+ fail: 'CloseCircle',
11
+ success: 'TickCircle',
12
+ warning: 'MinusCircle',
13
+ };
14
+ return jsx(Icon, { icon: icon === true ? defaultIcon[type] : icon, size: 24 });
15
+ }
16
+ function Notification({ type, icon, children }) {
17
+ const notificationColours = {
18
+ info: {
19
+ border: 'border-fg-info-secondary',
20
+ text: 'text-fg-info-secondary',
21
+ },
22
+ fail: {
23
+ border: 'border-fg-error-secondary',
24
+ text: 'text-fg-error-secondary',
25
+ },
26
+ success: {
27
+ border: 'border-fg-success-secondary',
28
+ text: 'text-fg-success-secondary',
29
+ },
30
+ warning: {
31
+ border: 'border-fg-warning-secondary',
32
+ text: 'text-fg-warning-secondary',
33
+ },
34
+ };
35
+ return (jsx("div", { className: `flex bg-bg-secondary p-5 border-l-10 ${notificationColours[type].border}`, children: jsxs("div", { className: `flex grow items-start gap-5`, children: [icon && (jsx("span", { className: notificationColours[type].text, children: jsx(NotificationIcon, { type: type, icon: icon }) })), jsx("div", { className: "flex flex-col grow", children: children })] }) }));
36
+ }
37
+
38
+ export { Notification as default };
39
+ //# sourceMappingURL=Notification.js.map
package/components/notification/Notification.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Notification.js","sources":["../../../../components/notification/Notification.tsx"],"sourcesContent":["import Icon, { IIcon } from '../icons/Icon';\n\nexport type INotification = {\n type: 'info' | 'fail' | 'success' | 'warning';\n icon?: boolean | IIcon['icon'];\n children: React.ReactElement;\n};\n\nfunction NotificationIcon({\n type,\n icon,\n}: {\n type: INotification['type'];\n icon: INotification['icon'];\n}) {\n if (icon === false || icon === undefined) {\n return null;\n }\n\n const defaultIcon: Record<INotification['type'], IIcon['icon']> = {\n info: 'PlusCircle',\n fail: 'CloseCircle',\n success: 'TickCircle',\n warning: 'MinusCircle',\n };\n\n return <Icon icon={icon === true ? defaultIcon[type] : icon} size={24} />;\n}\n\nexport default function Notification({ type, icon, children }: INotification) {\n const notificationColours: Record<\n INotification['type'],\n { border: string; text: string }\n > = {\n info: {\n border: 'border-fg-info-secondary',\n text: 'text-fg-info-secondary',\n },\n fail: {\n border: 'border-fg-error-secondary',\n text: 'text-fg-error-secondary',\n },\n success: {\n border: 'border-fg-success-secondary',\n text: 'text-fg-success-secondary',\n },\n warning: {\n border: 'border-fg-warning-secondary',\n text: 'text-fg-warning-secondary',\n },\n };\n\n return (\n <div\n className={`flex bg-bg-secondary p-5 border-l-10 ${notificationColours[type].border}`}\n >\n <div className={`flex grow items-start gap-5`}>\n {icon && (\n <span className={notificationColours[type].text}>\n <NotificationIcon type={type} icon={icon} />\n </span>\n )}\n <div className=\"flex flex-col grow\">{children}</div>\n </div>\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAQA,SAAS,gBAAgB,CAAC,EACtB,IAAI,EACJ,IAAI,GAIP,EAAA;IACG,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,SAAS,EAAE;AACtC,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,WAAW,GAAiD;AAC9D,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,OAAO,EAAE,aAAa;KACzB;IAED,OAAOA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI;AAC7E;AAEc,SAAU,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAiB,EAAA;AACxE,IAAA,MAAM,mBAAmB,GAGrB;AACA,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,IAAI,EAAE,wBAAwB;AACjC,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,2BAA2B;AACnC,YAAA,IAAI,EAAE,yBAAyB;AAClC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,6BAA6B;AACrC,YAAA,IAAI,EAAE,2BAA2B;AACpC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,6BAA6B;AACrC,YAAA,IAAI,EAAE,2BAA2B;AACpC,SAAA;KACJ;IAED,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,qCAAA,EAAwC,mBAAmB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAA,CAAE,YAErFC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,CACxC,IAAI,KACDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAA,QAAA,EAC3CA,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,GACzC,CACV,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,CAAA,EAAA,CAClD,EAAA,CACJ;AAEd;;;;"}
package/components/notification/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Notification from './Notification';
2
+ export { Notification };
package/components/notification/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as Notification } from './Notification.js';
2
+ //# sourceMappingURL=index.js.map
package/components/notification/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.6",
3
+ "version": "0.0.8",
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
@@ -1,5 +1,5 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @import url("https://fonts.googleapis.com/css2?family=Kanit&display=swap");
2
+ @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3
3
  @layer properties;
4
4
  @layer theme, base, components, utilities;
5
5
  @layer theme {
@@ -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-bold: 700;
11
12
  --default-font-family: var(--font-family-body);
12
13
  --default-mono-font-family: var(--font-mono);
13
14
  --color-white: #FFFFFF;
@@ -152,13 +153,17 @@
152
153
  --color-text-secondary: var(--color-indigo-400);
153
154
  --color-fg-accent-primary: var(--color-indigo-600);
154
155
  --color-fg-accent-secondary: var(--color-indigo-500);
156
+ --color-fg-error-secondary: var(--color-red-500);
157
+ --color-fg-warning-secondary: var(--color-yellow-500);
158
+ --color-fg-success-secondary: var(--color-green-500);
159
+ --color-fg-info-secondary: var(--color-blue-500);
155
160
  --color-bg-primary: var(--color-white);
156
161
  --color-bg-secondary: var(--color-gray-50);
157
162
  --color-bg-tertiary: var(--color-gray-100);
158
163
  --default-font-color: var(--color-text-secondary);
159
164
  --default-background-color: var(--color-bg-primary);
160
- --font-family-display: "Kanit", sans-serif;
161
- --font-family-body: "Kanit", sans-serif;
165
+ --font-family-display: 'Kanit', sans-serif;
166
+ --font-family-body: 'Kanit', sans-serif;
162
167
  }
163
168
  }
164
169
  @layer base {
@@ -334,6 +339,9 @@
334
339
  .contents {
335
340
  display: contents;
336
341
  }
342
+ .flex {
343
+ display: flex;
344
+ }
337
345
  .grid {
338
346
  display: grid;
339
347
  }
@@ -343,9 +351,63 @@
343
351
  .inline {
344
352
  display: inline;
345
353
  }
354
+ .grow {
355
+ flex-grow: 1;
356
+ }
346
357
  .transform {
347
358
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
348
359
  }
360
+ .flex-col {
361
+ flex-direction: column;
362
+ }
363
+ .items-start {
364
+ align-items: flex-start;
365
+ }
366
+ .gap-5 {
367
+ gap: var(--spacing-5);
368
+ }
369
+ .border {
370
+ border-style: var(--tw-border-style);
371
+ border-width: 1px;
372
+ }
373
+ .border-l-10 {
374
+ border-left-style: var(--tw-border-style);
375
+ border-left-width: 10px;
376
+ }
377
+ .border-fg-error-secondary {
378
+ border-color: var(--color-fg-error-secondary);
379
+ }
380
+ .border-fg-info-secondary {
381
+ border-color: var(--color-fg-info-secondary);
382
+ }
383
+ .border-fg-success-secondary {
384
+ border-color: var(--color-fg-success-secondary);
385
+ }
386
+ .border-fg-warning-secondary {
387
+ border-color: var(--color-fg-warning-secondary);
388
+ }
389
+ .bg-bg-secondary {
390
+ background-color: var(--color-bg-secondary);
391
+ }
392
+ .p-5 {
393
+ padding: var(--spacing-5);
394
+ }
395
+ .font-bold {
396
+ --tw-font-weight: var(--font-weight-bold);
397
+ font-weight: var(--font-weight-bold);
398
+ }
399
+ .text-fg-error-secondary {
400
+ color: var(--color-fg-error-secondary);
401
+ }
402
+ .text-fg-info-secondary {
403
+ color: var(--color-fg-info-secondary);
404
+ }
405
+ .text-fg-success-secondary {
406
+ color: var(--color-fg-success-secondary);
407
+ }
408
+ .text-fg-warning-secondary {
409
+ color: var(--color-fg-warning-secondary);
410
+ }
349
411
  .lowercase {
350
412
  text-transform: lowercase;
351
413
  }
@@ -406,12 +468,16 @@
406
468
  --color-text-accent-primary_hover: var(--color-pass-green);
407
469
  --color-text-accent-primary_on-accent-subtle: var(--color-pass-yellow);
408
470
  --color-text-accent-primary_on-accent-strong: var(--color-indigo-800);
409
- --color-text-accent-primary_on-accent-strongest: var(--color-indigo-800);
471
+ --color-text-accent-primary_on-accent-strongest: var(
472
+ --color-indigo-800
473
+ );
410
474
  --color-text-accent-secondary: var(--color-gray-300);
411
475
  --color-text-accent-secondary_hover: var(--color-gray-200);
412
476
  --color-text-accent-secondary_on-accent-subtle: var(--color-gray-300);
413
477
  --color-text-accent-secondary_on-accent-strong: var(--color-gray-300);
414
- --color-text-accent-secondary_on-accent-strongest: var(--color-gray-300);
478
+ --color-text-accent-secondary_on-accent-strongest: var(
479
+ --color-gray-300
480
+ );
415
481
  --color-text-accent-tertiary: var(--color-gray-400);
416
482
  --color-text-accent-tertiary_on-hover: var(--color-gray-400);
417
483
  --color-text-accent-tertiary_on-accent-subtle: var(--color-gray-400);
@@ -468,6 +534,8 @@
468
534
  --color-fg-warning-secondary: var(--color-yellow-400);
469
535
  --color-fg-success-primary: var(--color-green-500);
470
536
  --color-fg-success-secondary: var(--color-green-400);
537
+ --color-fg-info-primary: var(--color-blue-500);
538
+ --color-fg-info-secondary: var(--color-blue-400);
471
539
  --color-bg-quaternary: var(--color-indigo-700);
472
540
  --color-bg-quaternary-hover: var(--color-indigo-700);
473
541
  --color-bg-overlay: var(--color-indigo-800);
@@ -549,6 +617,15 @@
549
617
  syntax: "*";
550
618
  inherits: false;
551
619
  }
620
+ @property --tw-border-style {
621
+ syntax: "*";
622
+ inherits: false;
623
+ initial-value: solid;
624
+ }
625
+ @property --tw-font-weight {
626
+ syntax: "*";
627
+ inherits: false;
628
+ }
552
629
  @layer properties {
553
630
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
554
631
  *, ::before, ::after, ::backdrop {
@@ -557,6 +634,8 @@
557
634
  --tw-rotate-z: initial;
558
635
  --tw-skew-x: initial;
559
636
  --tw-skew-y: initial;
637
+ --tw-border-style: solid;
638
+ --tw-font-weight: initial;
560
639
  }
561
640
  }
562
641
  }
package/tailwindcss/redgate.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
3
3
  @layer properties;
4
4
  @layer theme, base, components, utilities;
5
5
  @layer theme {
@@ -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-bold: 700;
11
12
  --default-font-family: var(--font-family-body);
12
13
  --default-mono-font-family: var(--font-mono);
13
14
  --color-white: #FFFFFF;
@@ -152,13 +153,17 @@
152
153
  --color-text-secondary: var(--color-gray-700);
153
154
  --color-fg-accent-primary: var(--color-red-600);
154
155
  --color-fg-accent-secondary: var(--color-red-500);
156
+ --color-fg-error-secondary: var(--color-red-500);
157
+ --color-fg-warning-secondary: var(--color-yellow-500);
158
+ --color-fg-success-secondary: var(--color-green-500);
159
+ --color-fg-info-secondary: var(--color-blue-500);
155
160
  --color-bg-primary: var(--color-white);
156
161
  --color-bg-secondary: var(--color-gray-50);
157
162
  --color-bg-tertiary: var(--color-gray-100);
158
163
  --default-font-color: var(--color-text-secondary);
159
164
  --default-background-color: var(--color-bg-primary);
160
- --font-family-display: "Gatebase", sans-serif;
161
- --font-family-body: "Roboto", sans-serif;
165
+ --font-family-display: 'Gatebase', sans-serif;
166
+ --font-family-body: 'Roboto', sans-serif;
162
167
  }
163
168
  }
164
169
  @layer base {
@@ -334,6 +339,9 @@
334
339
  .contents {
335
340
  display: contents;
336
341
  }
342
+ .flex {
343
+ display: flex;
344
+ }
337
345
  .grid {
338
346
  display: grid;
339
347
  }
@@ -343,9 +351,63 @@
343
351
  .inline {
344
352
  display: inline;
345
353
  }
354
+ .grow {
355
+ flex-grow: 1;
356
+ }
346
357
  .transform {
347
358
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
348
359
  }
360
+ .flex-col {
361
+ flex-direction: column;
362
+ }
363
+ .items-start {
364
+ align-items: flex-start;
365
+ }
366
+ .gap-5 {
367
+ gap: var(--spacing-5);
368
+ }
369
+ .border {
370
+ border-style: var(--tw-border-style);
371
+ border-width: 1px;
372
+ }
373
+ .border-l-10 {
374
+ border-left-style: var(--tw-border-style);
375
+ border-left-width: 10px;
376
+ }
377
+ .border-fg-error-secondary {
378
+ border-color: var(--color-fg-error-secondary);
379
+ }
380
+ .border-fg-info-secondary {
381
+ border-color: var(--color-fg-info-secondary);
382
+ }
383
+ .border-fg-success-secondary {
384
+ border-color: var(--color-fg-success-secondary);
385
+ }
386
+ .border-fg-warning-secondary {
387
+ border-color: var(--color-fg-warning-secondary);
388
+ }
389
+ .bg-bg-secondary {
390
+ background-color: var(--color-bg-secondary);
391
+ }
392
+ .p-5 {
393
+ padding: var(--spacing-5);
394
+ }
395
+ .font-bold {
396
+ --tw-font-weight: var(--font-weight-bold);
397
+ font-weight: var(--font-weight-bold);
398
+ }
399
+ .text-fg-error-secondary {
400
+ color: var(--color-fg-error-secondary);
401
+ }
402
+ .text-fg-info-secondary {
403
+ color: var(--color-fg-info-secondary);
404
+ }
405
+ .text-fg-success-secondary {
406
+ color: var(--color-fg-success-secondary);
407
+ }
408
+ .text-fg-warning-secondary {
409
+ color: var(--color-fg-warning-secondary);
410
+ }
349
411
  .lowercase {
350
412
  text-transform: lowercase;
351
413
  }
@@ -475,6 +537,8 @@
475
537
  --color-fg-warning-secondary: var(--color-yellow-400);
476
538
  --color-fg-success-primary: var(--color-green-500);
477
539
  --color-fg-success-secondary: var(--color-green-400);
540
+ --color-fg-info-primary: var(--color-blue-500);
541
+ --color-fg-info-secondary: var(--color-blue-400);
478
542
  --color-bg-quaternary: var(--color-gray-700);
479
543
  --color-bg-quaternary-hover: var(--color-gray-700);
480
544
  --color-bg-overlay: var(--color-gray-800);
@@ -556,6 +620,15 @@
556
620
  syntax: "*";
557
621
  inherits: false;
558
622
  }
623
+ @property --tw-border-style {
624
+ syntax: "*";
625
+ inherits: false;
626
+ initial-value: solid;
627
+ }
628
+ @property --tw-font-weight {
629
+ syntax: "*";
630
+ inherits: false;
631
+ }
559
632
  @layer properties {
560
633
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
561
634
  *, ::before, ::after, ::backdrop {
@@ -564,6 +637,8 @@
564
637
  --tw-rotate-z: initial;
565
638
  --tw-skew-x: initial;
566
639
  --tw-skew-y: initial;
640
+ --tw-border-style: solid;
641
+ --tw-font-weight: initial;
567
642
  }
568
643
  }
569
644
  }
package/tailwindcss/sql-server-central.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
3
3
  @layer properties;
4
4
  @layer theme, base, components, utilities;
5
5
  @layer theme {
@@ -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-bold: 700;
11
12
  --default-font-family: var(--font-family-body);
12
13
  --default-mono-font-family: var(--font-mono);
13
14
  --color-white: #FFFFFF;
@@ -152,13 +153,17 @@
152
153
  --color-text-secondary: var(--color-gray-700);
153
154
  --color-fg-accent-primary: var(--color-blue-600);
154
155
  --color-fg-accent-secondary: var(--color-blue-500);
156
+ --color-fg-error-secondary: var(--color-red-500);
157
+ --color-fg-warning-secondary: var(--color-yellow-500);
158
+ --color-fg-success-secondary: var(--color-green-500);
159
+ --color-fg-info-secondary: var(--color-blue-500);
155
160
  --color-bg-primary: var(--color-white);
156
161
  --color-bg-secondary: var(--color-gray-50);
157
162
  --color-bg-tertiary: var(--color-gray-100);
158
163
  --default-font-color: var(--color-text-secondary);
159
164
  --default-background-color: var(--color-bg-primary);
160
- --font-family-display: "Roboto", sans-serif;
161
- --font-family-body: "Roboto", sans-serif;
165
+ --font-family-display: 'Roboto', sans-serif;
166
+ --font-family-body: 'Roboto', sans-serif;
162
167
  }
163
168
  }
164
169
  @layer base {
@@ -334,6 +339,9 @@
334
339
  .contents {
335
340
  display: contents;
336
341
  }
342
+ .flex {
343
+ display: flex;
344
+ }
337
345
  .grid {
338
346
  display: grid;
339
347
  }
@@ -343,9 +351,63 @@
343
351
  .inline {
344
352
  display: inline;
345
353
  }
354
+ .grow {
355
+ flex-grow: 1;
356
+ }
346
357
  .transform {
347
358
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
348
359
  }
360
+ .flex-col {
361
+ flex-direction: column;
362
+ }
363
+ .items-start {
364
+ align-items: flex-start;
365
+ }
366
+ .gap-5 {
367
+ gap: var(--spacing-5);
368
+ }
369
+ .border {
370
+ border-style: var(--tw-border-style);
371
+ border-width: 1px;
372
+ }
373
+ .border-l-10 {
374
+ border-left-style: var(--tw-border-style);
375
+ border-left-width: 10px;
376
+ }
377
+ .border-fg-error-secondary {
378
+ border-color: var(--color-fg-error-secondary);
379
+ }
380
+ .border-fg-info-secondary {
381
+ border-color: var(--color-fg-info-secondary);
382
+ }
383
+ .border-fg-success-secondary {
384
+ border-color: var(--color-fg-success-secondary);
385
+ }
386
+ .border-fg-warning-secondary {
387
+ border-color: var(--color-fg-warning-secondary);
388
+ }
389
+ .bg-bg-secondary {
390
+ background-color: var(--color-bg-secondary);
391
+ }
392
+ .p-5 {
393
+ padding: var(--spacing-5);
394
+ }
395
+ .font-bold {
396
+ --tw-font-weight: var(--font-weight-bold);
397
+ font-weight: var(--font-weight-bold);
398
+ }
399
+ .text-fg-error-secondary {
400
+ color: var(--color-fg-error-secondary);
401
+ }
402
+ .text-fg-info-secondary {
403
+ color: var(--color-fg-info-secondary);
404
+ }
405
+ .text-fg-success-secondary {
406
+ color: var(--color-fg-success-secondary);
407
+ }
408
+ .text-fg-warning-secondary {
409
+ color: var(--color-fg-warning-secondary);
410
+ }
349
411
  .lowercase {
350
412
  text-transform: lowercase;
351
413
  }
@@ -411,7 +473,9 @@
411
473
  --color-text-accent-secondary_hover: var(--color-gray-200);
412
474
  --color-text-accent-secondary_on-accent-subtle: var(--color-blue-400);
413
475
  --color-text-accent-secondary_on-accent-strong: var(--color-blue-400);
414
- --color-text-accent-secondary_on-accent-strongest: var(--color-blue-400);
476
+ --color-text-accent-secondary_on-accent-strongest: var(
477
+ --color-blue-400
478
+ );
415
479
  --color-text-accent-tertiary: var(--color-gray-500);
416
480
  --color-text-accent-tertiary_on-hover: var(--color-gray-500);
417
481
  --color-text-accent-tertiary_on-accent-subtle: var(--color-gray-500);
@@ -468,6 +532,8 @@
468
532
  --color-fg-warning-secondary: var(--color-yellow-400);
469
533
  --color-fg-success-primary: var(--color-green-500);
470
534
  --color-fg-success-secondary: var(--color-green-400);
535
+ --color-fg-info-primary: var(--color-blue-500);
536
+ --color-fg-info-secondary: var(--color-blue-400);
471
537
  --color-bg-quaternary: var(--color-gray-700);
472
538
  --color-bg-quaternary-hover: var(--color-gray-700);
473
539
  --color-bg-overlay: var(--color-gray-800);
@@ -549,6 +615,15 @@
549
615
  syntax: "*";
550
616
  inherits: false;
551
617
  }
618
+ @property --tw-border-style {
619
+ syntax: "*";
620
+ inherits: false;
621
+ initial-value: solid;
622
+ }
623
+ @property --tw-font-weight {
624
+ syntax: "*";
625
+ inherits: false;
626
+ }
552
627
  @layer properties {
553
628
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
554
629
  *, ::before, ::after, ::backdrop {
@@ -557,6 +632,8 @@
557
632
  --tw-rotate-z: initial;
558
633
  --tw-skew-x: initial;
559
634
  --tw-skew-y: initial;
635
+ --tw-border-style: solid;
636
+ --tw-font-weight: initial;
560
637
  }
561
638
  }
562
639
  }
package/tailwindcss/src/pass/input.css CHANGED
@@ -1,4 +1,4 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Kanit&display=swap");
1
+ @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2
2
  @import 'tailwindcss';
3
3
 
4
4
  @import '../global/theme.css';
@@ -11,7 +11,6 @@
11
11
  @import '../global/base.css';
12
12
 
13
13
  @theme {
14
-
15
14
  /* COLOUR MODES */
16
15
  --color-text-primary: var(--color-indigo-600);
17
16
  --color-text-primary_hover: var(--color-indigo-400);
@@ -19,139 +18,141 @@
19
18
  --color-text-primary_on-accent-strong: var(--color-white);
20
19
  --color-text-primary_on-accent-strongest: var(--color-indigo-900);
21
20
  --color-text-primary_on-accent-strongest-alt: var(--color-white);
22
-
21
+
23
22
  --color-text-secondary: var(--color-indigo-400);
24
23
  --color-text-secondary_hover: var(--color-indigo-700);
25
24
  --color-text-secondary_on-accent-subtle: var(--color-indigo-700);
26
25
  --color-text-secondary_on-accent-strong: var(--color-indigo-100);
27
26
  --color-text-secondary_on-accent-strongest: var(--color-indigo-800);
28
-
27
+
29
28
  --color-text-tertiary: var(--color-indigo-400);
30
29
  --color-text-tertiary_hover: var(--color-indigo-600);
31
30
  --color-text-tertiary_on-accent-subtle: var(--color-indigo-400);
32
31
  --color-text-tertiary_on-accent-strong: var(--color-indigo-200);
33
32
  --color-text-tertiary_on-accent-strongest: var(--color-indigo-400);
34
-
33
+
35
34
  --color-text-accent-primary: var(--color-indigo-400);
36
35
  --color-text-accent-primary_hover: var(--color-indigo-800);
37
36
  --color-text-accent-primary_on-accent-subtle: var(--color-indigo-400);
38
37
  --color-text-accent-primary_on-accent-strong: var(--color-indigo-25);
39
38
  --color-text-accent-primary_on-accent-strongest: var(--color-indigo-800);
40
-
39
+
41
40
  --color-text-accent-secondary: var(--color-indigo-700);
42
41
  --color-text-accent-secondary_hover: var(--color-indigo-800);
43
42
  --color-text-accent-secondary_on-accent-subtle: var(--color-indigo-700);
44
43
  --color-text-accent-secondary_on-accent-strong: var(--color-indigo-700);
45
44
  --color-text-accent-secondary_on-accent-strongest: var(--color-indigo-700);
46
-
45
+
47
46
  --color-text-accent-tertiary: var(--color-indigo-600);
48
47
  --color-text-accent-tertiary_on-hover: var(--color-indigo-600);
49
48
  --color-text-accent-tertiary_on-accent-subtle: var(--color-indigo-600);
50
49
  --color-text-accent-tertiary_on-accent-strong: var(--color-indigo-600);
51
50
  --color-text-accent-tertiary_on-accent-strongest: var(--color-indigo-600);
52
-
51
+
53
52
  --color-border-primary: var(--color-indigo-300);
54
53
  --color-border-primary_on-accent-subtle: var(--color-indigo-300);
55
54
  --color-border-primary_on-accent-strong: var(--color-indigo-300);
56
55
  --color-border-primary_on-accent-strongest: var(--color-indigo-300);
57
-
56
+
58
57
  --color-border-secondary: var(--color-gray-200);
59
58
  --color-border-secondary_on-accent-subtle: var(--color-gray-200);
60
59
  --color-border-secondary_on-accent-strong: var(--color-gray-200);
61
60
  --color-border-secondary_on-accent-strongest: var(--color-gray-200);
62
61
  --color-border-secondary_alt: rgba(0, 0, 0, 0.1);
63
-
62
+
64
63
  --color-border-tertiary: var(--color-gray-100);
65
64
  --color-border-tertiary_on-accent-subtle: var(--color-gray-100);
66
65
  --color-border-tertiary_on-accent-strong: var(--color-gray-100);
67
66
  --color-border-tertiary_on-accent-strongest: var(--color-gray-100);
68
-
67
+
69
68
  --color-border-accent: var(--color-pass-pink);
70
69
  --color-border-accent_on-accent-subtle: var(--color-pass-pink);
71
70
  --color-border-accent_on-accent-strong: var(--color-indigo-500);
72
71
  --color-border-accent_on-accent-strongest: var(--color-indigo-500);
73
72
  --color-border-accent_alt: var(--color-indigo-600);
74
-
73
+
75
74
  --color-border-accent_interactive: var(--color-indigo-300);
76
75
  --color-border-accent-interactive_on-subtle: var(--color-indigo-300);
77
76
  --color-border-accent-interactive_on-strong: var(--color-indigo-300);
78
77
  --color-border-accent-interactive_on-strongest: var(--color-indigo-300);
79
-
78
+
80
79
  --color-border-error: var(--color-red-500);
81
80
  --color-border-error_subtle: var(--color-red-300);
82
-
81
+
83
82
  --color-fg-primary: var(--color-gray-900);
84
83
  --color-fg-primary_alt: var(--color-gray-900);
85
84
  --color-fg-primary_on-accent-subtle: var(--color-gray-900);
86
85
  --color-fg-primary_on-accent-strong: var(--color-gray-900);
87
86
  --color-fg-primary_on-accent-strongest: var(--color-gray-900);
88
87
  --color-fg-primary_on-accent-strongest-alt: var(--color-white);
89
-
88
+
90
89
  --color-fg-secondary: var(--color-indigo-400);
91
90
  --color-fg-secondary_hover: var(--color-indigo-700);
92
91
  --color-fg-secondary_on-accent-subtle: var(--color-indigo-700);
93
92
  --color-fg-secondary_on-accent-strong: var(--color-indigo-100);
94
93
  --color-fg-secondary_on-accent-strongest: var(--color-indigo-800);
95
-
94
+
96
95
  --color-fg-tertiary: var(--color-indigo-400);
97
96
  --color-fg-tertiary_hover: var(--color-indigo-600);
98
97
  --color-fg-tertiary_on-accent-subtle: var(--color-indigo-400);
99
98
  --color-fg-tertiary_on-accent-strong: var(--color-indigo-200);
100
99
  --color-fg-tertiary_on-accent-strongest: var(--color-indigo-400);
101
-
100
+
102
101
  --color-fg-accent-primary: var(--color-indigo-600);
103
102
  --color-fg-accent-primary_alt: var(--color-indigo-600);
104
103
  --color-fg-accent-secondary: var(--color-indigo-500);
105
104
  --color-fg-accent-secondary_alt: var(--color-indigo-500);
106
105
  --color-fg-accent-secondary_hover: var(--color-indigo-600);
107
-
106
+
108
107
  --color-fg-error-primary: var(--color-red-600);
109
108
  --color-fg-error-secondary: var(--color-red-500);
110
109
  --color-fg-warning-primary: var(--color-yellow-600);
111
110
  --color-fg-warning-secondary: var(--color-yellow-500);
112
111
  --color-fg-success-primary: var(--color-green-600);
113
112
  --color-fg-success-secondary: var(--color-green-500);
114
-
113
+ --color-fg-info-primary: var(--color-blue-600);
114
+ --color-fg-info-secondary: var(--color-blue-500);
115
+
115
116
  --color-bg-quaternary: var(--color-gray-200);
116
117
  --color-bg-quaternary-hover: var(--color-gray-200);
117
118
  --color-bg-overlay: var(--color-gray-950);
118
-
119
+
119
120
  --color-bg-primary: var(--color-white);
120
121
  --color-bg-primary_hover: var(--color-gray-50);
121
122
  --color-bg-primary_on-accent-subtle: var(--color-indigo-25);
122
123
  --color-bg-primary_alt: var(--color-white);
123
124
  --color-bg-primary-static: var(--color-gray-950);
124
-
125
+
125
126
  --color-bg-secondary: var(--color-gray-50);
126
127
  --color-bg-secondary_hover: var(--color-gray-100);
127
128
  --color-bg-secondary_alt: var(--color-gray-50);
128
129
  --color-bg-secondary-static: var(--color-gray-600);
129
-
130
+
130
131
  --color-bg-tertiary: var(--color-gray-100);
131
132
  --color-bg-tertiary-hover: var(--color-gray-200);
132
-
133
+
133
134
  --color-bg-accent-subtlest: var(--color-indigo-25);
134
135
  --color-bg-accent-subtlest-hover: var(--color-indigo-50);
135
-
136
+
136
137
  --color-bg-accent-subtle: var(--color-indigo-50);
137
138
  --color-bg-accent-subtle-hover: var(--color-indigo-25);
138
139
  --color-bg-accent-subtle_alt: var(--color-indigo-50);
139
-
140
+
140
141
  --color-bg-accent-strong: var(--color-indigo-500);
141
142
  --color-bg-accent-strong-hover: var(--color-indigo-700);
142
-
143
+
143
144
  --color-bg-accent-strongest: var(--color-pass-yellow);
144
145
  --color-bg-accent-strongest_hover: var(--color-pass-green);
145
-
146
+
146
147
  --color-bg-accent-strongest-alt: var(--color-indigo-400);
147
148
  --color-bg-accent-strongest-alt_hover: var(--color-indigo-400);
148
149
  --color-bg-accent-strongest-alt_on-subtle: var(--color-indigo-600);
149
150
  --color-bg-accent-strongest-alt_on-strong: var(--color-indigo-600);
150
151
  --color-bg-accent-strongest-alt_on-strongest: var(--color-indigo-600);
151
-
152
+
152
153
  --color-bg-accent-strong-primary-alt: var(--color-indigo-400);
153
154
  --color-bg-accent-strong-primary-alt-hover: var(--color-indigo-400);
154
-
155
+
155
156
  --color-bg-error-primary: var(--color-red-50);
156
157
  --color-bg-error-secondary: var(--color-red-100);
157
158
  --color-bg-error-solid: var(--color-red-600);
@@ -162,10 +163,10 @@
162
163
  --color-bg-success-primary: var(--color-green-50);
163
164
  --color-bg-success-secondary: var(--color-green-100);
164
165
  --color-bg-success-solid: var(--color-green-600);
165
-
166
+
166
167
  --color-focus-ring: var(--color-indigo-500);
167
168
  --color-focus-ring-error: var(--color-indigo-500);
168
-
169
+
169
170
  --color-shadow-xs: rgba(0, 0, 0, 0.05);
170
171
  --color-shadow-sm_01: rgba(0, 0, 0, 0.1);
171
172
  --color-shadow-sm_02: rgba(0, 0, 0, 0.1);
@@ -198,8 +199,8 @@
198
199
 
199
200
  /* TYPOGRAPHY */
200
201
  /* Font family */
201
- --font-family-display: "Kanit", sans-serif;
202
- --font-family-body: "Kanit", sans-serif;
202
+ --font-family-display: 'Kanit', sans-serif;
203
+ --font-family-body: 'Kanit', sans-serif;
203
204
  --default-font-family: var(--font-family-body);
204
205
  }
205
206
 
@@ -212,53 +213,57 @@
212
213
  --color-text-primary_on-accent-strong: var(--color-white);
213
214
  --color-text-primary_on-accent-strongest: var(--color-indigo-700);
214
215
  --color-text-primary_on-accent-strongest-alt: var(--color-indigo-700);
215
-
216
+
216
217
  --color-text-secondary: var(--color-indigo-50);
217
218
  --color-text-secondary_hover: var(--color-white);
218
219
  --color-text-secondary_on-accent-subtle: var(--color-indigo-50);
219
220
  --color-text-secondary_on-accent-strong: var(--color-indigo-500);
220
221
  --color-text-secondary_on-accent-strongest: var(--color-indigo-700);
221
-
222
+
222
223
  --color-text-tertiary: var(--color-indigo-100);
223
224
  --color-text-tertiary_hover: var(--color-indigo-25);
224
225
  --color-text-tertiary_on-accent-subtle: var(--color-indigo-100);
225
226
  --color-text-tertiary_on-accent-strong: var(--color-indigo-400);
226
227
  --color-text-tertiary_on-accent-strongest: var(--color-indigo-500);
227
-
228
+
228
229
  --color-text-accent-primary: var(--color-pass-yellow);
229
230
  --color-text-accent-primary_hover: var(--color-pass-green);
230
231
  --color-text-accent-primary_on-accent-subtle: var(--color-pass-yellow);
231
232
  --color-text-accent-primary_on-accent-strong: var(--color-indigo-800);
232
- --color-text-accent-primary_on-accent-strongest: var(--color-indigo-800);
233
-
233
+ --color-text-accent-primary_on-accent-strongest: var(
234
+ --color-indigo-800
235
+ );
236
+
234
237
  --color-text-accent-secondary: var(--color-gray-300);
235
238
  --color-text-accent-secondary_hover: var(--color-gray-200);
236
239
  --color-text-accent-secondary_on-accent-subtle: var(--color-gray-300);
237
240
  --color-text-accent-secondary_on-accent-strong: var(--color-gray-300);
238
- --color-text-accent-secondary_on-accent-strongest: var(--color-gray-300);
239
-
241
+ --color-text-accent-secondary_on-accent-strongest: var(
242
+ --color-gray-300
243
+ );
244
+
240
245
  --color-text-accent-tertiary: var(--color-gray-400);
241
246
  --color-text-accent-tertiary_on-hover: var(--color-gray-400);
242
247
  --color-text-accent-tertiary_on-accent-subtle: var(--color-gray-400);
243
248
  --color-text-accent-tertiary_on-accent-strong: var(--color-gray-400);
244
249
  --color-text-accent-tertiary_on-accent-strongest: var(--color-gray-400);
245
-
250
+
246
251
  --color-border-primary: var(--color-indigo-200);
247
252
  --color-border-primary_on-accent-subtle: var(--color-indigo-200);
248
253
  --color-border-primary_on-accent-strong: var(--color-indigo-200);
249
254
  --color-border-primary_on-accent-strongest: var(--color-indigo-200);
250
-
255
+
251
256
  --color-border-secondary: var(--color-gray-800);
252
257
  --color-border-secondary_on-accent-subtle: var(--color-gray-800);
253
258
  --color-border-secondary_on-accent-strong: var(--color-gray-800);
254
259
  --color-border-secondary_on-accent-strongest: var(--color-gray-800);
255
260
  --color-border-secondary_alt: var(--color-gray-800);
256
-
261
+
257
262
  --color-border-tertiary: var(--color-gray-800);
258
263
  --color-border-tertiary_on-accent-subtle: var(--color-gray-800);
259
264
  --color-border-tertiary_on-accent-strong: var(--color-gray-800);
260
265
  --color-border-tertiary_on-accent-strongest: var(--color-gray-800);
261
-
266
+
262
267
  --color-border-accent: var(--color-pass-pink);
263
268
  --color-border-accent_on-accent-subtle: var(--color-pass-pink);
264
269
  --color-border-accent_on-accent-strong: var(--color-indigo-400);
@@ -270,82 +275,84 @@
270
275
  --color-border-accent-interactive_on-subtle: var(--color-indigo-200);
271
276
  --color-border-accent-interactive_on-strong: var(--color-indigo-200);
272
277
  --color-border-accent-interactive_on-strongest: var(--color-indigo-200);
273
-
278
+
274
279
  --color-border-error: var(--color-red-400);
275
280
  --color-border-error_subtle: var(--color-red-500);
276
-
281
+
277
282
  --color-fg-primary: var(--color-white);
278
283
  --color-fg-primary_alt: var(--color-white);
279
284
  --color-fg-primary_on-accent-subtle: var(--color-white);
280
285
  --color-fg-primary_on-accent-strong: var(--color-white);
281
286
  --color-fg-primary_on-accent-strongest: var(--color-white);
282
287
  --color-fg-primary_on-accent-strongest-alt: var(--color-indigo-600);
283
-
288
+
284
289
  --color-fg-secondary: var(--color-indigo-50);
285
290
  --color-fg-secondary_hover: var(--color-white);
286
291
  --color-fg-secondary_on-accent-subtle: var(--color-indigo-50);
287
292
  --color-fg-secondary_on-accent-strong: var(--color-indigo-500);
288
293
  --color-fg-secondary_on-accent-strongest: var(--color-indigo-700);
289
-
294
+
290
295
  --color-fg-tertiary: var(--color-indigo-100);
291
296
  --color-fg-tertiary_hover: var(--color-indigo-25);
292
297
  --color-fg-tertiary_on-accent-subtle: var(--color-indigo-100);
293
298
  --color-fg-tertiary_on-accent-strong: var(--color-indigo-400);
294
299
  --color-fg-tertiary_on-accent-strongest: var(--color-indigo-500);
295
-
300
+
296
301
  --color-fg-accent-primary: var(--color-indigo-500);
297
302
  --color-fg-accent-primary_alt: var(--color-gray-300);
298
303
  --color-fg-accent-secondary: var(--color-indigo-500);
299
304
  --color-fg-accent-secondary_alt: var(--color-gray-600);
300
305
  --color-fg-accent-secondary_hover: var(--color-gray-500);
301
-
306
+
302
307
  --color-fg-error-primary: var(--color-red-500);
303
308
  --color-fg-error-secondary: var(--color-red-400);
304
309
  --color-fg-warning-primary: var(--color-yellow-500);
305
310
  --color-fg-warning-secondary: var(--color-yellow-400);
306
311
  --color-fg-success-primary: var(--color-green-500);
307
312
  --color-fg-success-secondary: var(--color-green-400);
308
-
313
+ --color-fg-info-primary: var(--color-blue-500);
314
+ --color-fg-info-secondary: var(--color-blue-400);
315
+
309
316
  --color-bg-quaternary: var(--color-indigo-700);
310
317
  --color-bg-quaternary-hover: var(--color-indigo-700);
311
318
  --color-bg-overlay: var(--color-indigo-800);
312
-
319
+
313
320
  --color-bg-primary: var(--color-indigo-500);
314
321
  --color-bg-primary_hover: var(--color-indigo-700);
315
322
  --color-bg-primary_on-accent-subtle: var(--color-indigo-400);
316
323
  --color-bg-primary_alt: var(--color-indigo-700);
317
324
  --color-bg-primary-static: var(--color-indigo-600);
318
-
325
+
319
326
  --color-bg-secondary: var(--color-indigo-700);
320
327
  --color-bg-secondary_hover: var(--color-indigo-950);
321
328
  --color-bg-secondary_alt: var(--color-indigo-500);
322
329
  --color-bg-secondary-static: var(--color-indigo-600);
323
-
330
+
324
331
  --color-bg-tertiary: var(--color-indigo-800);
325
332
  --color-bg-tertiary-hover: var(--color-indigo-700);
326
-
333
+
327
334
  --color-bg-accent-subtlest: var(--color-indigo-800);
328
335
  --color-bg-accent-subtlest-hover: var(--color-indigo-700);
329
-
336
+
330
337
  --color-bg-accent-subtle: var(--color-indigo-400);
331
338
  --color-bg-accent-subtle-hover: var(--color-indigo-700);
332
339
  --color-bg-accent-subtle_alt: var(--color-indigo-700);
333
-
340
+
334
341
  --color-bg-accent-strong: var(--color-indigo-400);
335
342
  --color-bg-accent-strong-hover: var(--color-indigo-500);
336
-
343
+
337
344
  --color-bg-accent-strongest: var(--color-pass-yellow);
338
345
  --color-bg-accent-strongest_hover: var(--color-pass-green);
339
-
346
+
340
347
  --color-bg-accent-strongest-alt: var(--color-pass-yellow);
341
348
  --color-bg-accent-strongest-alt_hover: var(--color-indigo-100);
342
349
  --color-bg-accent-strongest-alt_on-subtle: var(--color-indigo-25);
343
350
  --color-bg-accent-strongest-alt_on-strong: var(--color-indigo-25);
344
351
  --color-bg-accent-strongest-alt_on-strongest: var(--color-indigo-25);
345
-
352
+
346
353
  --color-bg-accent-strong-primary-alt: var(--color-indigo-300);
347
354
  --color-bg-accent-strong-primary-alt-hover: var(--color-indigo-300);
348
-
355
+
349
356
  --color-bg-error-primary: var(--color-red-950);
350
357
  --color-bg-error-secondary: var(--color-red-600);
351
358
  --color-bg-error-solid: var(--color-red-600);
@@ -356,10 +363,10 @@
356
363
  --color-bg-success-primary: var(--color-green-950);
357
364
  --color-bg-success-secondary: var(--color-green-600);
358
365
  --color-bg-success-solid: var(--color-green-600);
359
-
366
+
360
367
  --color-focus-ring: var(--color-indigo-500);
361
368
  --color-focus-ring-error: var(--color-indigo-500);
362
-
369
+
363
370
  --color-shadow-xs: var(--color-transparent);
364
371
  --color-shadow-sm_01: var(--color-transparent);
365
372
  --color-shadow-sm_02: var(--color-transparent);
@@ -378,4 +385,4 @@
378
385
  --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
379
386
  --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
380
387
  }
381
- }
388
+ }
package/tailwindcss/src/redgate/input.css CHANGED
@@ -1,4 +1,4 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
2
2
  @import 'tailwindcss';
3
3
 
4
4
  @font-face {
@@ -6,7 +6,8 @@
6
6
  font-style: normal;
7
7
  font-weight: 500;
8
8
  font-display: swap;
9
- src: url('https://cdn.red-gate.com/assets/fonts/redgate-type/redgate-type-medium.woff') format('woff');
9
+ src: url('https://cdn.red-gate.com/assets/fonts/redgate-type/redgate-type-medium.woff')
10
+ format('woff');
10
11
  }
11
12
 
12
13
  @import '../global/theme.css';
@@ -19,7 +20,6 @@
19
20
  @import '../global/base.css';
20
21
 
21
22
  @theme {
22
-
23
23
  /* COLOUR MODES */
24
24
  --color-text-primary: var(--color-gray-950);
25
25
  --color-text-primary_hover: var(--color-red-600);
@@ -103,6 +103,8 @@
103
103
  --color-fg-warning-secondary: var(--color-yellow-500);
104
104
  --color-fg-success-primary: var(--color-green-600);
105
105
  --color-fg-success-secondary: var(--color-green-500);
106
+ --color-fg-info-primary: var(--color-blue-600);
107
+ --color-fg-info-secondary: var(--color-blue-500);
106
108
  --color-bg-quaternary: var(--color-gray-200);
107
109
  --color-bg-quaternary-hover: var(--color-gray-200);
108
110
  --color-bg-overlay: var(--color-gray-950);
@@ -177,8 +179,8 @@
177
179
 
178
180
  /* TYPOGRAPHY */
179
181
  /* Font family */
180
- --font-family-display: "Gatebase", sans-serif;
181
- --font-family-body: "Roboto", sans-serif;
182
+ --font-family-display: 'Gatebase', sans-serif;
183
+ --font-family-body: 'Roboto', sans-serif;
182
184
  --default-font-family: var(--font-family-body);
183
185
  }
184
186
 
@@ -267,6 +269,8 @@
267
269
  --color-fg-warning-secondary: var(--color-yellow-400);
268
270
  --color-fg-success-primary: var(--color-green-500);
269
271
  --color-fg-success-secondary: var(--color-green-400);
272
+ --color-fg-info-primary: var(--color-blue-500);
273
+ --color-fg-info-secondary: var(--color-blue-400);
270
274
  --color-bg-quaternary: var(--color-gray-700);
271
275
  --color-bg-quaternary-hover: var(--color-gray-700);
272
276
  --color-bg-overlay: var(--color-gray-800);
@@ -327,4 +331,4 @@
327
331
  --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
328
332
  --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
329
333
  }
330
- }
334
+ }
package/tailwindcss/src/sql-server-central/input.css CHANGED
@@ -1,4 +1,4 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
2
2
  @import 'tailwindcss';
3
3
 
4
4
  @import '../global/theme.css';
@@ -11,7 +11,6 @@
11
11
  @import '../global/base.css';
12
12
 
13
13
  @theme {
14
-
15
14
  /* COLOUR MODES */
16
15
  --color-text-primary: var(--color-blue-800);
17
16
  --color-text-primary_hover: var(--color-blue-600);
@@ -39,115 +38,117 @@
39
38
  --color-text-accent-secondary_on-accent-subtle: var(--color-blue-600);
40
39
  --color-text-accent-secondary_on-accent-strong: var(--color-blue-600);
41
40
  --color-text-accent-secondary_on-accent-strongest: var(--color-blue-600);
42
-
41
+
43
42
  --color-text-accent-tertiary: var(--color-blue-500);
44
43
  --color-text-accent-tertiary_on-hover: var(--color-blue-600);
45
44
  --color-text-accent-tertiary_on-accent-subtle: var(--color-blue-600);
46
45
  --color-text-accent-tertiary_on-accent-strong: var(--color-blue-600);
47
46
  --color-text-accent-tertiary_on-accent-strongest: var(--color-blue-600);
48
-
47
+
49
48
  --color-border-primary: var(--color-gray-500);
50
49
  --color-border-primary_on-accent-subtle: var(--color-gray-500);
51
50
  --color-border-primary_on-accent-strong: var(--color-gray-500);
52
51
  --color-border-primary_on-accent-strongest: var(--color-gray-500);
53
-
52
+
54
53
  --color-border-secondary: var(--color-gray-200);
55
54
  --color-border-secondary_on-accent-subtle: var(--color-gray-200);
56
55
  --color-border-secondary_on-accent-strong: var(--color-gray-200);
57
56
  --color-border-secondary_on-accent-strongest: var(--color-gray-200);
58
57
  --color-border-secondary_alt: rgba(0, 0, 0, 0.1);
59
-
58
+
60
59
  --color-border-tertiary: var(--color-gray-100);
61
60
  --color-border-tertiary_on-accent-subtle: var(--color-gray-100);
62
61
  --color-border-tertiary_on-accent-strong: var(--color-gray-100);
63
62
  --color-border-tertiary_on-accent-strongest: var(--color-gray-100);
64
-
63
+
65
64
  --color-border-accent: var(--color-blue-600);
66
65
  --color-border-accent_on-accent-subtle: var(--color-blue-600);
67
66
  --color-border-accent_on-accent-strong: var(--color-blue-500);
68
67
  --color-border-accent_on-accent-strongest: var(--color-blue-500);
69
68
  --color-border-accent_alt: var(--color-blue-600);
70
-
69
+
71
70
  --color-border-accent_interactive: var(--color-blue-600);
72
71
  --color-border-accent-interactive_on-subtle: var(--color-blue-600);
73
72
  --color-border-accent-interactive_on-strong: var(--color-blue-600);
74
73
  --color-border-accent-interactive_on-strongest: var(--color-blue-600);
75
-
74
+
76
75
  --color-border-error: var(--color-red-500);
77
76
  --color-border-error_subtle: var(--color-red-300);
78
-
77
+
79
78
  --color-fg-primary: var(--color-gray-900);
80
79
  --color-fg-primary_alt: var(--color-gray-900);
81
80
  --color-fg-primary_on-accent-subtle: var(--color-gray-900);
82
81
  --color-fg-primary_on-accent-strong: var(--color-gray-900);
83
82
  --color-fg-primary_on-accent-strongest: var(--color-gray-900);
84
83
  --color-fg-primary_on-accent-strongest-alt: var(--color-white);
85
-
84
+
86
85
  --color-fg-secondary: var(--color-gray-700);
87
86
  --color-fg-secondary_hover: var(--color-gray-950);
88
87
  --color-fg-secondary_on-accent-subtle: var(--color-blue-700);
89
88
  --color-fg-secondary_on-accent-strong: var(--color-blue-50);
90
89
  --color-fg-secondary_on-accent-strongest: var(--color-blue-800);
91
-
90
+
92
91
  --color-fg-tertiary: var(--color-gray-600);
93
92
  --color-fg-tertiary_hover: var(--color-gray-700);
94
93
  --color-fg-tertiary_on-accent-subtle: var(--color-blue-600);
95
94
  --color-fg-tertiary_on-accent-strong: var(--color-blue-50);
96
95
  --color-fg-tertiary_on-accent-strongest: var(--color-blue-700);
97
-
96
+
98
97
  --color-fg-accent-primary: var(--color-blue-600);
99
98
  --color-fg-accent-primary_alt: var(--color-blue-600);
100
99
  --color-fg-accent-secondary: var(--color-blue-500);
101
100
  --color-fg-accent-secondary_alt: var(--color-blue-500);
102
101
  --color-fg-accent-secondary_hover: var(--color-blue-600);
103
-
102
+
104
103
  --color-fg-error-primary: var(--color-red-600);
105
104
  --color-fg-error-secondary: var(--color-red-500);
106
105
  --color-fg-warning-primary: var(--color-yellow-600);
107
106
  --color-fg-warning-secondary: var(--color-yellow-500);
108
107
  --color-fg-success-primary: var(--color-green-600);
109
108
  --color-fg-success-secondary: var(--color-green-500);
110
-
109
+ --color-fg-info-primary: var(--color-blue-600);
110
+ --color-fg-info-secondary: var(--color-blue-500);
111
+
111
112
  --color-bg-quaternary: var(--color-gray-200);
112
113
  --color-bg-quaternary-hover: var(--color-gray-200);
113
114
  --color-bg-overlay: var(--color-gray-950);
114
-
115
+
115
116
  --color-bg-primary: var(--color-white);
116
117
  --color-bg-primary_hover: var(--color-gray-50);
117
118
  --color-bg-primary_on-accent-subtle: var(--color-blue-25);
118
119
  --color-bg-primary_alt: var(--color-white);
119
120
  --color-bg-primary-static: var(--color-gray-950);
120
-
121
+
121
122
  --color-bg-secondary: var(--color-gray-50);
122
123
  --color-bg-secondary_hover: var(--color-gray-100);
123
124
  --color-bg-secondary_alt: var(--color-gray-50);
124
125
  --color-bg-secondary-static: var(--color-gray-600);
125
-
126
+
126
127
  --color-bg-tertiary: var(--color-gray-100);
127
128
  --color-bg-tertiary-hover: var(--color-gray-200);
128
-
129
+
129
130
  --color-bg-accent-subtlest: var(--color-blue-25);
130
131
  --color-bg-accent-subtlest-hover: var(--color-blue-50);
131
-
132
+
132
133
  --color-bg-accent-subtle: var(--color-blue-50);
133
134
  --color-bg-accent-subtle-hover: var(--color-blue-25);
134
135
  --color-bg-accent-subtle_alt: var(--color-blue-50);
135
-
136
+
136
137
  --color-bg-accent-strong: var(--color-blue-800);
137
138
  --color-bg-accent-strong-hover: var(--color-blue-700);
138
-
139
+
139
140
  --color-bg-accent-strongest: var(--color-yellow-200);
140
141
  --color-bg-accent-strongest_hover: var(--color-yellow-100);
141
-
142
+
142
143
  --color-bg-accent-strongest-alt: var(--color-blue-600);
143
144
  --color-bg-accent-strongest-alt_hover: var(--color-blue-700);
144
145
  --color-bg-accent-strongest-alt_on-subtle: var(--color-blue-600);
145
146
  --color-bg-accent-strongest-alt_on-strong: var(--color-blue-600);
146
147
  --color-bg-accent-strongest-alt_on-strongest: var(--color-blue-600);
147
-
148
+
148
149
  --color-bg-accent-strong-primary-alt: var(--color-yellow-300);
149
150
  --color-bg-accent-strong-primary-alt-hover: var(--color-blue-600);
150
-
151
+
151
152
  --color-bg-error-primary: var(--color-red-50);
152
153
  --color-bg-error-secondary: var(--color-red-100);
153
154
  --color-bg-error-solid: var(--color-red-600);
@@ -158,10 +159,10 @@
158
159
  --color-bg-success-primary: var(--color-green-50);
159
160
  --color-bg-success-secondary: var(--color-green-100);
160
161
  --color-bg-success-solid: var(--color-green-600);
161
-
162
+
162
163
  --color-focus-ring: var(--color-blue-500);
163
164
  --color-focus-ring-error: var(--color-blue-500);
164
-
165
+
165
166
  --color-shadow-xs: rgba(0, 0, 0, 0.05);
166
167
  --color-shadow-sm_01: rgba(0, 0, 0, 0.1);
167
168
  --color-shadow-sm_02: rgba(0, 0, 0, 0.1);
@@ -194,8 +195,8 @@
194
195
 
195
196
  /* TYPOGRAPHY */
196
197
  /* Font family */
197
- --font-family-display: "Roboto", sans-serif;
198
- --font-family-body: "Roboto", sans-serif;
198
+ --font-family-display: 'Roboto', sans-serif;
199
+ --font-family-body: 'Roboto', sans-serif;
199
200
  --default-font-family: var(--font-family-body);
200
201
  }
201
202
 
@@ -227,7 +228,9 @@
227
228
  --color-text-accent-secondary_hover: var(--color-gray-200);
228
229
  --color-text-accent-secondary_on-accent-subtle: var(--color-blue-400);
229
230
  --color-text-accent-secondary_on-accent-strong: var(--color-blue-400);
230
- --color-text-accent-secondary_on-accent-strongest: var(--color-blue-400);
231
+ --color-text-accent-secondary_on-accent-strongest: var(
232
+ --color-blue-400
233
+ );
231
234
  --color-text-accent-tertiary: var(--color-gray-500);
232
235
  --color-text-accent-tertiary_on-hover: var(--color-gray-500);
233
236
  --color-text-accent-tertiary_on-accent-subtle: var(--color-gray-500);
@@ -284,6 +287,8 @@
284
287
  --color-fg-warning-secondary: var(--color-yellow-400);
285
288
  --color-fg-success-primary: var(--color-green-500);
286
289
  --color-fg-success-secondary: var(--color-green-400);
290
+ --color-fg-info-primary: var(--color-blue-500);
291
+ --color-fg-info-secondary: var(--color-blue-400);
287
292
  --color-bg-quaternary: var(--color-gray-700);
288
293
  --color-bg-quaternary-hover: var(--color-gray-700);
289
294
  --color-bg-overlay: var(--color-gray-800);
@@ -344,4 +349,4 @@
344
349
  --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
345
350
  --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
346
351
  }
347
- }
352
+ }