@frontify/fondue 12.0.0-beta.424 → 12.0.0-beta.425

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/index.d.ts CHANGED
@@ -14251,12 +14251,12 @@ declare namespace PatternImagery {
14251
14251
  }
14252
14252
 
14253
14253
 
14254
- declare namespace PatternTypography {
14254
+ declare namespace PatternSound {
14255
14255
  var displayName: string;
14256
14256
  }
14257
14257
 
14258
14258
 
14259
- declare namespace PatternSound {
14259
+ declare namespace PatternTypography {
14260
14260
  var displayName: string;
14261
14261
  }
14262
14262
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@frontify/fondue",
3
3
  "type": "module",
4
- "version": "12.0.0-beta.424",
4
+ "version": "12.0.0-beta.425",
5
5
  "description": "Design system of Frontify",
6
6
  "author": "Frontify Developers <developers@frontify.com>",
7
7
  "homepage": "https://github.com/Frontify/fondue",
@@ -39,7 +39,7 @@
39
39
  "types": "dist/index.d.ts",
40
40
  "files": [
41
41
  "dist",
42
- "tailwind.config.js"
42
+ "tailwind.config.ts"
43
43
  ],
44
44
  "engines": {
45
45
  "node": ">=18"
@@ -0,0 +1,134 @@
1
+ /* (c) Copyright Frontify Ltd., all rights reserved. */
2
+
3
+ import tailwindForm from '@tailwindcss/forms';
4
+ import { type Config } from 'tailwindcss';
5
+
6
+ export default {
7
+ presets: [require('@frontify/fondue-tokens/tailwind')],
8
+ content: ['./src/**/*.{js,ts,tsx}'],
9
+ plugins: [
10
+ tailwindForm({
11
+ strategy: 'class',
12
+ }),
13
+ ],
14
+ theme: {
15
+ extend: {
16
+ outline: {
17
+ violet: '1px solid #825fff',
18
+ },
19
+ boxShadow: {
20
+ large: '0 25px 80px 0 rgba(45, 50, 50, 0.4)',
21
+ mid: '0px 4px 24px 0px rgba(80, 80, 80, 0.20)',
22
+ 'mid-top': '0 -10px 10px -5px rgba(45, 50, 50, 0.1)',
23
+ 'mid-bottom': '0 10px 10px -5px rgba(45, 50, 50, 0.1)',
24
+ 'inner-mighty': 'inset 0 0 0 var(--line-width) var(--line-color-mighty)',
25
+ big: '0px 25px 80px 0px rgba(80, 80, 80, 0.20)',
26
+ none: 'none',
27
+ },
28
+ ringColor: {
29
+ blue: '#5e9ed6',
30
+ },
31
+ colors: {
32
+ transparent: 'transparent',
33
+ current: 'currentColor',
34
+ white: '#ffffff',
35
+ black: {
36
+ DEFAULT: '#2d3232',
37
+
38
+ // Solids
39
+ superdark: '#1a1d1d',
40
+ 100: '#2d3232',
41
+ 95: '#424747',
42
+ 90: '#575b5b',
43
+ 85: '#5f6363',
44
+ 80: '#6c7070',
45
+ 70: '#818484',
46
+ 60: '#969898',
47
+ 50: '#abadad',
48
+ 40: '#b3b5b5',
49
+ 30: '#c0c2c2',
50
+ 20: '#d5d6d6',
51
+ 10: '#eaebeb',
52
+ 5: '#f7f7f7',
53
+ 0: '#fafafa',
54
+ warm: '#e6dcdc',
55
+ },
56
+ violet: {
57
+ // Solids
58
+ 90: '#443185',
59
+ 70: '#6449c4',
60
+ 60: '#825fff',
61
+ 50: '#9088ff',
62
+ 40: '#c8d1ed',
63
+ 20: '#e3e8f6',
64
+ },
65
+ green: {
66
+ 90: '#006452',
67
+ 75: '#00866E',
68
+ 70: '#00a084',
69
+ 60: '#00c8a5',
70
+ 50: '#80dbb7',
71
+ 40: '#bee1d4',
72
+ 20: '#def0e9',
73
+ },
74
+
75
+ yellow: {
76
+ 90: '#cc9000',
77
+ 70: '#e6a200',
78
+ 60: '#ffb400',
79
+ 50: '#eec779',
80
+ 40: '#e1d4be',
81
+ 20: '#f0e9de',
82
+ },
83
+
84
+ red: {
85
+ 90: '#992136',
86
+ 70: '#cc2c48',
87
+ 65: '#E52144',
88
+ 60: '#ff375a',
89
+ 50: '#ff8066',
90
+ 40: '#e1c4be',
91
+ 20: '#f0e1de',
92
+ },
93
+ },
94
+ fontFamily: {
95
+ sans: [
96
+ '"Space Grotesk Frontify"',
97
+ 'Arial',
98
+ '-apple-system',
99
+ 'BlinkMacSystemFont',
100
+ 'Segoe UI',
101
+ 'Roboto',
102
+ 'Helvetica',
103
+ 'sans-serif',
104
+ '"Apple Color Emoji"',
105
+ '"Segoe UI Emoji"',
106
+ '"Segoe UI Symbol"',
107
+ ],
108
+ mono: ['Menlo', 'Courier', 'monospace'],
109
+ },
110
+ fontSize: {
111
+ xxs: ['0.75rem', { letterSpacing: '0.02rem', lineHeight: '1rem' }],
112
+ xs: ['0.813rem', '1rem'],
113
+ s: ['0.875rem', '1rem'],
114
+ m: ['1rem', '1.25rem'],
115
+ l: ['1.125rem', '1.5rem'],
116
+ xl: ['1.5rem', '2rem'],
117
+ xxl: ['2rem', '2.5rem'],
118
+ xxxl: ['3rem', '3.5rem'],
119
+ },
120
+ transitionProperty: {
121
+ height: 'height',
122
+ width: 'width',
123
+ },
124
+ screens: {
125
+ xs: '480px',
126
+ sm: '600px',
127
+ md: '768px',
128
+ lg: '1024px',
129
+ xl: '1280px',
130
+ '2xl': '1536px',
131
+ },
132
+ },
133
+ },
134
+ } satisfies Config;