@dpa-id-components/dpa-shared-components 20.0.5 → 20.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tailwindPreset.css +126 -0
- package/package.json +1 -1
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/* This line is needed for `@reference`s in Vue SFC `style` blocks within the shared components library to work. */
|
|
2
|
+
@import "tailwindcss";
|
|
3
|
+
|
|
4
|
+
@plugin "@tailwindcss/typography";
|
|
5
|
+
|
|
6
|
+
@custom-variant aria-invalid (&[aria-invalid="true"]);
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
|
10
|
+
so we've added these compatibility styles to make sure everything still
|
|
11
|
+
looks the same as it did with Tailwind CSS v3.
|
|
12
|
+
|
|
13
|
+
If we ever want to remove these styles, we need to add an explicit border
|
|
14
|
+
color utility to any element that depends on these defaults.
|
|
15
|
+
*/
|
|
16
|
+
@layer base {
|
|
17
|
+
*,
|
|
18
|
+
::after,
|
|
19
|
+
::before,
|
|
20
|
+
::backdrop,
|
|
21
|
+
::file-selector-button {
|
|
22
|
+
border-color: var(--color-gray-200, currentcolor);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Address https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
|
|
26
|
+
button:not(:disabled),
|
|
27
|
+
[role="button"]:not(:disabled) {
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@utility outline-blue {
|
|
33
|
+
isolation: isolate;
|
|
34
|
+
outline: 2px solid rgba(0, 62, 219, 0.5);
|
|
35
|
+
outline-offset: 2px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@theme {
|
|
39
|
+
/**
|
|
40
|
+
* COLORS
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
--color-transparent: rgba(255, 255, 255, 0);
|
|
44
|
+
|
|
45
|
+
--color-gray-100: #f5f5f5;
|
|
46
|
+
--color-gray-200: #eeeeee;
|
|
47
|
+
--color-gray-300: #e3e3e3;
|
|
48
|
+
--color-gray-400: #bababa;
|
|
49
|
+
--color-gray-500: #8c8c8c;
|
|
50
|
+
--color-gray-600: #7e7e7e;
|
|
51
|
+
--color-gray-700: #757575;
|
|
52
|
+
--color-gray-800: #4d4d4d;
|
|
53
|
+
--color-gray-900: #212121;
|
|
54
|
+
|
|
55
|
+
--color-green-neon: #00e281;
|
|
56
|
+
--color-green-primary: #00b064;
|
|
57
|
+
--color-green-night: #006345;
|
|
58
|
+
|
|
59
|
+
--color-blue-default: #003edb;
|
|
60
|
+
--color-blue-dark: #0030aa;
|
|
61
|
+
|
|
62
|
+
--color-red-default: #e53935;
|
|
63
|
+
--color-red-dark: #ab000d;
|
|
64
|
+
|
|
65
|
+
--color-pink-default: #f5138d;
|
|
66
|
+
--color-pink-dark: #bd0060;
|
|
67
|
+
|
|
68
|
+
--color-purple-default: #8e24aa;
|
|
69
|
+
--color-purple-dark: #5c007a;
|
|
70
|
+
|
|
71
|
+
--color-cyan-default: #00acc1;
|
|
72
|
+
--color-cyan-dark: #007c91;
|
|
73
|
+
|
|
74
|
+
--color-teal-default: #00897b;
|
|
75
|
+
--color-teal-dark: #005b4f;
|
|
76
|
+
|
|
77
|
+
--color-yellow-default: #f9f500;
|
|
78
|
+
--color-yellow-dark: #c1be00;
|
|
79
|
+
|
|
80
|
+
--color-orange-default: #ffb300;
|
|
81
|
+
--color-orange-dark: #c68400;
|
|
82
|
+
|
|
83
|
+
--color-alert-red-default: #f53000;
|
|
84
|
+
--color-alert-red-dark: #ba2400;
|
|
85
|
+
|
|
86
|
+
--color-alert-green-default: #00d200;
|
|
87
|
+
--color-alert-green-dark: #00aa00;
|
|
88
|
+
|
|
89
|
+
--color-rainbow-red: #e53935;
|
|
90
|
+
--color-rainbow-red-dark: #ab000d;
|
|
91
|
+
--color-rainbow-orange: #ffb300;
|
|
92
|
+
--color-rainbow-purple: #8e24aa;
|
|
93
|
+
|
|
94
|
+
--shadow-default: 0px 1px 1px rgba(0, 0, 0, 0.1);
|
|
95
|
+
--shadow-negative: 0px -1px 1px rgba(0, 0, 0, 0.1);
|
|
96
|
+
--shadow-md: 0px 1px 5px rgba(0, 0, 0, 0.1);
|
|
97
|
+
--shadow-lg: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* TYPOGRAPHY
|
|
101
|
+
*/
|
|
102
|
+
|
|
103
|
+
--font-sans: Inter, sans-serif;
|
|
104
|
+
--font-marketing: Futura, sans-serif;
|
|
105
|
+
|
|
106
|
+
--text-xs--line-height: calc(1.125 / 0.75);
|
|
107
|
+
--text-sm--line-height: calc(1.3125 / 0.875);
|
|
108
|
+
--text-lg--line-height: calc(1.6875 / 1.125);
|
|
109
|
+
--text-xl--line-height: calc(1.875 / 1.25);
|
|
110
|
+
--text-2xl--line-height: calc(2.25 / 1.5);
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* SPACING
|
|
114
|
+
*/
|
|
115
|
+
|
|
116
|
+
--spacing: 4px;
|
|
117
|
+
|
|
118
|
+
--spacing-inherit: inherit;
|
|
119
|
+
--spacing-half: 2px;
|
|
120
|
+
/* Used for form controls that receive a 2px border on :focus instead of the usual 1px and so a padding of 15px is applied instead of 16px to stop the content from jumping around. */
|
|
121
|
+
--spacing-inputFocused: 15px;
|
|
122
|
+
|
|
123
|
+
--inset-1/2: 50%;
|
|
124
|
+
--inset-full: 100%;
|
|
125
|
+
--inset-auto: auto;
|
|
126
|
+
}
|