@deepgram/styles 0.0.8 → 0.1.2
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/README.md +1 -1
- package/design-system.yaml +2591 -0
- package/dist/deepgram.css +1 -1
- package/dist/deepgram.expanded.css +450 -644
- package/lib/deepgram.css +391 -503
- package/package.json +7 -3
- package/tailwind.config.js +78 -109
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deepgram/styles",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Tailwind-based design system and styles library for Deepgram design system and demos",
|
|
5
5
|
"author": "Deepgram",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "https://github.com/deepgram/
|
|
9
|
+
"url": "https://github.com/deepgram/dx-design.git",
|
|
10
10
|
"directory": "libs/styles"
|
|
11
11
|
},
|
|
12
12
|
"keywords": [
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"lib/",
|
|
27
27
|
"tailwind.config.js",
|
|
28
28
|
"postcss.config.js",
|
|
29
|
+
"design-system.yaml",
|
|
29
30
|
"README.md",
|
|
30
31
|
"LICENSE"
|
|
31
32
|
],
|
|
@@ -44,6 +45,9 @@
|
|
|
44
45
|
},
|
|
45
46
|
"./tailwind-config": {
|
|
46
47
|
"default": "./tailwind.config.js"
|
|
48
|
+
},
|
|
49
|
+
"./design-system": {
|
|
50
|
+
"default": "./design-system.yaml"
|
|
47
51
|
}
|
|
48
52
|
},
|
|
49
53
|
"publishConfig": {
|
|
@@ -57,4 +61,4 @@
|
|
|
57
61
|
"optional": true
|
|
58
62
|
}
|
|
59
63
|
}
|
|
60
|
-
}
|
|
64
|
+
}
|
package/tailwind.config.js
CHANGED
|
@@ -2,181 +2,150 @@
|
|
|
2
2
|
module.exports = {
|
|
3
3
|
content: ["./lib/**/*.css", "./src/**/*.{html,js,ts,jsx,tsx}"],
|
|
4
4
|
safelist: [
|
|
5
|
-
|
|
5
|
+
'collapsed',
|
|
6
|
+
'visible',
|
|
6
7
|
{
|
|
7
8
|
pattern: /^dg-/,
|
|
8
9
|
},
|
|
10
|
+
{
|
|
11
|
+
pattern: /^drag-/,
|
|
12
|
+
},
|
|
9
13
|
],
|
|
10
14
|
darkMode: "class",
|
|
11
15
|
theme: {
|
|
12
16
|
extend: {
|
|
13
17
|
colors: {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"dg-fog": "#edede2", // Fog Gray (secondary text)
|
|
33
|
-
"dg-platinum": "#e1e1e5", // Platinum (tertiary text)
|
|
34
|
-
"dg-muted": "#949498", // Slate (muted text)
|
|
35
|
-
|
|
36
|
-
// Status Colors
|
|
37
|
-
"dg-success": "#12b76a",
|
|
38
|
-
"dg-warning": "#fec84b",
|
|
39
|
-
"dg-danger": "#f04438",
|
|
40
|
-
|
|
41
|
-
// Gradient colors for primary button
|
|
42
|
-
"dg-gradient-start": "#008fc1",
|
|
43
|
-
"dg-gradient-end": "#00f099",
|
|
18
|
+
'dg-primary': 'var(--dg-primary, #13ef95)',
|
|
19
|
+
'dg-secondary': 'var(--dg-secondary, #149afb)',
|
|
20
|
+
'dg-almost-black': '#050506',
|
|
21
|
+
'dg-background': '#0b0b0c',
|
|
22
|
+
'dg-charcoal': '#1a1a1f',
|
|
23
|
+
'dg-translucent': 'rgba(0, 0, 0, 0.5)',
|
|
24
|
+
'dg-border': '#2c2c33',
|
|
25
|
+
'dg-pebble': '#4e4e52',
|
|
26
|
+
'dg-slate': '#949498',
|
|
27
|
+
'dg-text': '#fbfbff',
|
|
28
|
+
'dg-fog': '#edede2',
|
|
29
|
+
'dg-platinum': '#e1e1e5',
|
|
30
|
+
'dg-muted': '#949498',
|
|
31
|
+
'dg-success': '#12b76a',
|
|
32
|
+
'dg-warning': '#fec84b',
|
|
33
|
+
'dg-danger': '#f04438',
|
|
34
|
+
'dg-gradient-start': '#008fc1',
|
|
35
|
+
'dg-gradient-end': '#00f099',
|
|
44
36
|
},
|
|
45
37
|
fontFamily: {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"BlinkMacSystemFont",
|
|
50
|
-
"Segoe UI",
|
|
51
|
-
"Roboto",
|
|
52
|
-
"Helvetica",
|
|
53
|
-
"Arial",
|
|
54
|
-
"sans-serif",
|
|
55
|
-
],
|
|
56
|
-
"dg-noto": [
|
|
57
|
-
"Noto Sans",
|
|
58
|
-
"-apple-system",
|
|
59
|
-
"BlinkMacSystemFont",
|
|
60
|
-
"Segoe UI",
|
|
61
|
-
"Roboto",
|
|
62
|
-
"Helvetica",
|
|
63
|
-
"Arial",
|
|
64
|
-
"sans-serif",
|
|
65
|
-
],
|
|
66
|
-
"dg-mono": ["Fira Code", "Monaco", "Consolas", "Courier New", "monospace"],
|
|
38
|
+
'dg-sans': ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
|
39
|
+
'dg-noto': ['Noto Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
|
40
|
+
'dg-mono': ['Fira Code', 'Monaco', 'Consolas', 'Courier New', 'monospace'],
|
|
67
41
|
},
|
|
68
42
|
spacing: {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
43
|
+
'128': '32rem',
|
|
44
|
+
'dg-xs': '0.25rem',
|
|
45
|
+
'dg-sm': '0.5rem',
|
|
46
|
+
'dg-md': '1rem',
|
|
47
|
+
'dg-lg': '1.5rem',
|
|
48
|
+
'dg-xl': '2rem',
|
|
49
|
+
'dg-2xl': '3rem',
|
|
76
50
|
},
|
|
77
51
|
borderRadius: {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
52
|
+
'dg-sm': '0.25rem',
|
|
53
|
+
'dg-md': '0.5rem',
|
|
54
|
+
'dg-lg': '0.75rem',
|
|
55
|
+
'dg-xl': '1rem',
|
|
82
56
|
},
|
|
83
57
|
boxShadow: {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"dg-lg":
|
|
88
|
-
"0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05)",
|
|
58
|
+
'dg-sm': '0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05)',
|
|
59
|
+
'dg-md': '0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06)',
|
|
60
|
+
'dg-lg': '0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05)',
|
|
89
61
|
},
|
|
90
62
|
},
|
|
91
63
|
},
|
|
92
64
|
plugins: [
|
|
93
65
|
function ({ addBase, addUtilities, theme }) {
|
|
94
66
|
addBase({
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
67
|
+
':root': {
|
|
68
|
+
'--dg-base-font-size': '16px',
|
|
69
|
+
'--dg-border-width': '0.125rem',
|
|
70
|
+
'--dg-primary': '#13ef95',
|
|
71
|
+
'--dg-secondary': '#149afb',
|
|
100
72
|
},
|
|
101
73
|
html: {
|
|
102
|
-
fontSize:
|
|
103
|
-
scrollBehavior:
|
|
74
|
+
fontSize: 'var(--dg-base-font-size, 16px)',
|
|
75
|
+
scrollBehavior: 'smooth',
|
|
104
76
|
},
|
|
105
77
|
body: {
|
|
106
78
|
fontFamily: theme("fontFamily.dg-sans"),
|
|
107
|
-
WebkitFontSmoothing:
|
|
108
|
-
MozOsxFontSmoothing:
|
|
79
|
+
WebkitFontSmoothing: 'antialiased',
|
|
80
|
+
MozOsxFontSmoothing: 'grayscale',
|
|
109
81
|
backgroundColor: theme("colors.dg-background"),
|
|
110
82
|
color: theme("colors.dg-text"),
|
|
111
83
|
lineHeight: theme("lineHeight.normal"),
|
|
112
84
|
},
|
|
113
|
-
|
|
85
|
+
'h1, h2, h3, h4, h5, h6': {
|
|
114
86
|
fontFamily: theme("fontFamily.dg-noto"),
|
|
115
87
|
fontWeight: theme("fontWeight.bold"),
|
|
116
88
|
},
|
|
117
89
|
h1: {
|
|
118
90
|
fontSize: theme("fontSize.4xl"),
|
|
119
|
-
|
|
91
|
+
'@media (min-width: 768px)': {
|
|
120
92
|
fontSize: theme("fontSize.5xl"),
|
|
121
93
|
},
|
|
122
94
|
},
|
|
123
95
|
h2: {
|
|
124
96
|
fontSize: theme("fontSize.3xl"),
|
|
125
|
-
|
|
97
|
+
'@media (min-width: 768px)': {
|
|
126
98
|
fontSize: theme("fontSize.4xl"),
|
|
127
99
|
},
|
|
128
100
|
},
|
|
129
101
|
h3: {
|
|
130
102
|
fontSize: theme("fontSize.2xl"),
|
|
131
|
-
|
|
103
|
+
'@media (min-width: 768px)': {
|
|
132
104
|
fontSize: theme("fontSize.3xl"),
|
|
133
105
|
},
|
|
134
106
|
},
|
|
135
107
|
h4: {
|
|
136
108
|
fontSize: theme("fontSize.xl"),
|
|
137
|
-
|
|
109
|
+
'@media (min-width: 768px)': {
|
|
138
110
|
fontSize: theme("fontSize.2xl"),
|
|
139
111
|
},
|
|
140
112
|
},
|
|
141
|
-
|
|
113
|
+
'code, pre': {
|
|
142
114
|
fontFamily: theme("fontFamily.dg-mono"),
|
|
143
115
|
},
|
|
144
116
|
a: {
|
|
145
117
|
color: theme("colors.dg-primary"),
|
|
146
|
-
transitionProperty:
|
|
147
|
-
transitionDuration:
|
|
148
|
-
|
|
149
|
-
opacity:
|
|
118
|
+
transitionProperty: 'color',
|
|
119
|
+
transitionDuration: '200ms',
|
|
120
|
+
'&:hover': {
|
|
121
|
+
opacity: '0.8',
|
|
150
122
|
},
|
|
151
123
|
},
|
|
152
124
|
});
|
|
153
125
|
|
|
154
|
-
// Add custom utilities for gradient border and glow effects
|
|
155
126
|
addUtilities({
|
|
156
|
-
|
|
157
|
-
backgroundImage:
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
backgroundColor: "rgb(0, 0, 0)",
|
|
127
|
+
'.dg-gradient-border': {
|
|
128
|
+
backgroundImage: 'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000))',
|
|
129
|
+
backgroundOrigin: 'padding-box, border-box',
|
|
130
|
+
backgroundClip: 'padding-box, border-box',
|
|
131
|
+
backgroundRepeat: 'no-repeat',
|
|
132
|
+
backgroundPosition: 'center',
|
|
133
|
+
backgroundSize: '100% 100%',
|
|
134
|
+
backgroundColor: 'rgb(0, 0, 0)',
|
|
165
135
|
},
|
|
166
|
-
|
|
167
|
-
backgroundImage:
|
|
168
|
-
backgroundOrigin:
|
|
169
|
-
backgroundClip:
|
|
170
|
-
backgroundRepeat:
|
|
171
|
-
backgroundPosition:
|
|
172
|
-
backgroundSize:
|
|
136
|
+
'.dg-bg-reset': {
|
|
137
|
+
backgroundImage: 'none',
|
|
138
|
+
backgroundOrigin: 'padding-box',
|
|
139
|
+
backgroundClip: 'border-box',
|
|
140
|
+
backgroundRepeat: 'repeat',
|
|
141
|
+
backgroundPosition: '0% 0%',
|
|
142
|
+
backgroundSize: 'auto',
|
|
173
143
|
},
|
|
174
|
-
|
|
175
|
-
boxShadow:
|
|
176
|
-
"color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0",
|
|
144
|
+
'.dg-glow-cyan-green': {
|
|
145
|
+
boxShadow: 'color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0',
|
|
177
146
|
},
|
|
178
|
-
|
|
179
|
-
boxShadow:
|
|
147
|
+
'.dg-shadow-subtle': {
|
|
148
|
+
boxShadow: 'rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem',
|
|
180
149
|
},
|
|
181
150
|
});
|
|
182
151
|
},
|