@deepgram/styles 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +7 -14
  2. package/design-system.yaml +75 -75
  3. package/dist/deepgram.css +2 -3
  4. package/dist/deepgram.expanded.css +3000 -2671
  5. package/lib/deepgram.css +63 -63
  6. package/lib/tailwind-theme.css +168 -0
  7. package/package.json +6 -5
  8. package/postcss.config.js +0 -7
  9. package/tailwind.config.js +0 -153
package/tailwind.config.js DELETED
@@ -1,153 +0,0 @@
1
- /** @type {import('tailwindcss').Config} */
2
- module.exports = {
3
- content: ["./lib/**/*.css", "./src/**/*.{html,js,ts,jsx,tsx}"],
4
- safelist: [
5
- 'collapsed',
6
- 'visible',
7
- {
8
- pattern: /^dg-/,
9
- },
10
- {
11
- pattern: /^drag-/,
12
- },
13
- ],
14
- darkMode: "class",
15
- theme: {
16
- extend: {
17
- colors: {
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',
36
- },
37
- fontFamily: {
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'],
41
- },
42
- spacing: {
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',
50
- },
51
- borderRadius: {
52
- 'dg-sm': '0.25rem',
53
- 'dg-md': '0.5rem',
54
- 'dg-lg': '0.75rem',
55
- 'dg-xl': '1rem',
56
- },
57
- boxShadow: {
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)',
61
- },
62
- },
63
- },
64
- plugins: [
65
- function ({ addBase, addUtilities, theme }) {
66
- addBase({
67
- ':root': {
68
- '--dg-base-font-size': '16px',
69
- '--dg-border-width': '0.125rem',
70
- '--dg-primary': '#13ef95',
71
- '--dg-secondary': '#149afb',
72
- },
73
- html: {
74
- fontSize: 'var(--dg-base-font-size, 16px)',
75
- scrollBehavior: 'smooth',
76
- },
77
- body: {
78
- fontFamily: theme("fontFamily.dg-sans"),
79
- WebkitFontSmoothing: 'antialiased',
80
- MozOsxFontSmoothing: 'grayscale',
81
- backgroundColor: theme("colors.dg-background"),
82
- color: theme("colors.dg-text"),
83
- lineHeight: theme("lineHeight.normal"),
84
- },
85
- 'h1, h2, h3, h4, h5, h6': {
86
- fontFamily: theme("fontFamily.dg-noto"),
87
- fontWeight: theme("fontWeight.bold"),
88
- },
89
- h1: {
90
- fontSize: theme("fontSize.4xl"),
91
- '@media (min-width: 768px)': {
92
- fontSize: theme("fontSize.5xl"),
93
- },
94
- },
95
- h2: {
96
- fontSize: theme("fontSize.3xl"),
97
- '@media (min-width: 768px)': {
98
- fontSize: theme("fontSize.4xl"),
99
- },
100
- },
101
- h3: {
102
- fontSize: theme("fontSize.2xl"),
103
- '@media (min-width: 768px)': {
104
- fontSize: theme("fontSize.3xl"),
105
- },
106
- },
107
- h4: {
108
- fontSize: theme("fontSize.xl"),
109
- '@media (min-width: 768px)': {
110
- fontSize: theme("fontSize.2xl"),
111
- },
112
- },
113
- 'code, pre': {
114
- fontFamily: theme("fontFamily.dg-mono"),
115
- },
116
- a: {
117
- color: theme("colors.dg-primary"),
118
- transitionProperty: 'color',
119
- transitionDuration: '200ms',
120
- '&:hover': {
121
- opacity: '0.8',
122
- },
123
- },
124
- });
125
-
126
- addUtilities({
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)',
135
- },
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',
143
- },
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',
146
- },
147
- '.dg-shadow-subtle': {
148
- boxShadow: 'rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem',
149
- },
150
- });
151
- },
152
- ],
153
- };