@leaflink/stash 50.17.1 → 51.0.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.
- package/README.md +13 -1
- package/dist/tailwind-base.d.ts +4 -0
- package/dist/tailwind-base.js +6 -4
- package/dist/tailwind-base.js.map +1 -1
- package/package.json +1 -1
- package/styles/base.css +1 -29
- package/styles/sofia-font.css +30 -0
- package/tailwind-base.ts +4 -2
package/README.md
CHANGED
|
@@ -93,9 +93,9 @@ See the [Tailwind](#tailwind) section for more details on how to configure it in
|
|
|
93
93
|
|
|
94
94
|
```ts filename="main.ts"
|
|
95
95
|
import '@leaflink/stash/styles/backwards-compat.css'; // Add this line before the base and components styles.
|
|
96
|
+
import '@leaflink/stash/styles/sofia-font.css'; // Add this line before the base and components styles if you're using the Sofia font.
|
|
96
97
|
import '@leaflink/stash/styles/base.css';
|
|
97
98
|
import '@leaflink/stash/components.css';
|
|
98
|
-
|
|
99
99
|
import './app.css';
|
|
100
100
|
```
|
|
101
101
|
|
|
@@ -245,6 +245,9 @@ greenfield projects.
|
|
|
245
245
|
/* legacy stash styles - not required for greenfield projects */
|
|
246
246
|
import '@leaflink/stash/styles/backwards-compat.css';
|
|
247
247
|
|
|
248
|
+
/* legacy font styles - not required for greenfield projects (Use DM Sans instead) */
|
|
249
|
+
import '@leaflink/stash/styles/sofia-font.css';
|
|
250
|
+
|
|
248
251
|
/* stash styles */
|
|
249
252
|
import '@leaflink/stash/styles/base.css';
|
|
250
253
|
import '@leaflink/stash/components.css';
|
|
@@ -286,6 +289,15 @@ export default {
|
|
|
286
289
|
presets: [stashPreset],
|
|
287
290
|
|
|
288
291
|
content: ['./src/**/*.{vue,ts,js}', './node_modules/@leaflink/stash/dist/*.js'],
|
|
292
|
+
|
|
293
|
+
theme: {
|
|
294
|
+
extend: {
|
|
295
|
+
// Add this to your tailwind config to use the DM Sans font instead of the legacy Sofia font.
|
|
296
|
+
fontFamily: {
|
|
297
|
+
sans: ['DM Sans', 'sans-serif'],
|
|
298
|
+
},
|
|
299
|
+
},
|
|
300
|
+
},
|
|
289
301
|
};
|
|
290
302
|
```
|
|
291
303
|
|
package/dist/tailwind-base.d.ts
CHANGED
package/dist/tailwind-base.js
CHANGED
|
@@ -45,10 +45,12 @@ const l = {
|
|
|
45
45
|
blocklist: ["container"],
|
|
46
46
|
theme: {
|
|
47
47
|
screens: i,
|
|
48
|
-
// Creates classes like `.sofia` that applies the appropriate font family
|
|
49
|
-
// to our typography elements.
|
|
50
48
|
fontFamily: {
|
|
51
49
|
mono: ["monospace"],
|
|
50
|
+
sans: ["Sofia", "sans-serif"],
|
|
51
|
+
/**
|
|
52
|
+
* @deprecated - use `tw-font-sans` instead!
|
|
53
|
+
*/
|
|
52
54
|
sofia: ["Sofia", "sans-serif"]
|
|
53
55
|
},
|
|
54
56
|
colors: {
|
|
@@ -383,7 +385,7 @@ const l = {
|
|
|
383
385
|
container: !1,
|
|
384
386
|
preflight: !1
|
|
385
387
|
}
|
|
386
|
-
},
|
|
388
|
+
}, o = () => {
|
|
387
389
|
const e = [];
|
|
388
390
|
return ["purple", "royal", "blue", "seafoam", "teal", "green", "yellow", "orange", "red", "ice"].forEach((a) => {
|
|
389
391
|
["bg", "text", "border", "stroke"].forEach((t) => {
|
|
@@ -395,6 +397,6 @@ const l = {
|
|
|
395
397
|
};
|
|
396
398
|
export {
|
|
397
399
|
l as default,
|
|
398
|
-
|
|
400
|
+
o as getColorClasses
|
|
399
401
|
};
|
|
400
402
|
//# sourceMappingURL=tailwind-base.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-base.js","sources":["../tailwind-base.ts"],"sourcesContent":["import type { Config } from 'tailwindcss';\n\nimport { SCREEN_SIZES } from './src/constants';\n\nexport default {\n content: [\n // Todo: can/should this be optimized? Where should we be looking for classes?\n './src/**/*.{vue,ts,tsx,js,jsx,mdx}',\n ],\n\n prefix: 'tw-',\n\n // ALWAYS include these color related classes. This allows us to dynamically\n // create color classes based on a color prop in our components instead of\n // listing the full class name like is encouraged in the docs.\n // https://tailwindcss.com/docs/content-configuration#using-regular-expressions\n //\n // Note: If any stash components change which color classes they dynamically build,\n // this needs to change. Keep this list as small as possible.\n //\n // Note: Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern\n // includes a variant modifier like /hover:bg-red-.+/.\n safelist: [\n {\n pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)$/,\n },\n // Illustration.vue stroke color.\n {\n pattern: /stroke-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-500$/,\n },\n // Illustration.vue dynamic text.\n {\n pattern: /text-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-400$/,\n },\n // Dynamic bg color for components using the colorScheme function (Chip, Avatar, etc.)\n 'bg-ice-200',\n // These are custom classes that we might not use in our Stash code, but we\n // define in Stash and want to keep in the final CSS for downstream use.\n 'heading-jumbo',\n // allow white and black to be used dynamically\n 'bg-white',\n 'bg-black',\n 'text-white',\n 'text-black',\n 'border-white',\n 'border-black',\n ],\n\n // Conflicts with our own custom classes\n // https://tailwindcss.com/docs/content-configuration#discarding-classes\n blocklist: ['container'],\n\n theme: {\n screens: SCREEN_SIZES,\n\n // Creates classes like `.sofia` that applies the appropriate font family\n // to our typography elements.\n fontFamily: {\n mono: ['monospace'],\n sofia: ['Sofia', 'sans-serif'],\n },\n\n colors: {\n white: '#fff',\n black: '#000',\n transparent: 'transparent',\n inherit: 'inherit',\n\n // --color-white: #ffffff;\n // --color-black: #000000;\n // --color-blue-hover: rgba(0,114,240,0.74902);\n // --color-red-hover: rgba(228,0,43,0.74902);\n // --color-ice-700-hover: rgba(118,121,127,0.11765);\n // --color-white-hover: rgba(255,255,255,0.11765);\n // --button-secondary-blue-hover: rgba(0,114,240,0.11765);\n // --button-secondary-red-hover: rgba(228,0,43,0.11765);\n\n // https://tailwindcss.com/docs/upgrade-guide#fill-and-stroke-use-color-palette\n current: 'currentColor',\n\n purple: {\n 900: '#06040F',\n 800: '#0C091E',\n 700: '#120D2D',\n 600: '#18123C',\n 500: '#1E164B',\n 400: '#4B456F',\n 300: '#787393',\n 200: '#A5A2B7',\n 100: '#D2D0DB',\n },\n\n royal: {\n 900: '#0A0C24',\n 800: '#131747',\n 700: '#1D236B',\n 600: '#262E8E',\n 500: '#303AB2',\n 400: '#5961C1',\n 300: '#8389D1',\n 200: '#ACB0E0',\n 100: '#D6D8F0',\n },\n\n blue: {\n 900: '#001730',\n 800: '#002E60',\n 700: '#004490',\n 600: '#005BC0',\n 500: '#0072F0',\n 400: '#338EF3',\n 300: '#66AAF6',\n 200: '#99C7F9',\n 100: '#CCE3FC',\n },\n\n teal: {\n 900: '#002528',\n 800: '#004B50',\n 700: '#017078',\n 600: '#0196A0',\n 500: '#01BBC8',\n 400: '#34C9D3',\n 300: '#67D6DE',\n 200: '#99E4E9',\n 100: '#CCF1F4',\n },\n\n green: {\n 900: '#062313',\n 800: '#0C4627',\n 700: '#11683A',\n 600: '#178B4E',\n 500: '#1DAE61',\n 400: '#4ABE81',\n 300: '#77CEA0',\n 200: '#A5DFC0',\n 100: '#D2EFDF',\n },\n\n seafoam: {\n 900: '#0C2C26',\n 800: '#18584D',\n 700: '#248373',\n 600: '#30AF9A',\n 500: '#3CDBC0',\n 400: '#63E2CD',\n 300: '#8AE9D9',\n 200: '#B1F1E6',\n 100: '#D8F8F2',\n },\n\n yellow: {\n 900: '#332A00',\n 800: '#665500',\n 700: '#997F00',\n 600: '#CCAA00',\n 500: '#FFD400',\n 400: '#FFDD33',\n 300: '#FFE566',\n 200: '#FFEE99',\n 100: '#FFF6CC',\n },\n\n orange: {\n 900: '#331E07',\n 800: '#663B0F',\n 700: '#995916',\n 600: '#CC761E',\n 500: '#FF9425',\n 400: '#FFA951',\n 300: '#FFBF7C',\n 200: '#FFD4A8',\n 100: '#FFEAD3',\n },\n\n red: {\n 900: '#2E0009',\n 800: '#5B0011',\n 700: '#89001A',\n 600: '#B60022',\n 500: '#E4002B',\n 400: '#E93355',\n 300: '#EF6680',\n 200: '#F499AA',\n 100: '#FACCD5',\n },\n\n ice: {\n 900: '#27282A',\n 800: '#4F5055',\n 700: '#76797F',\n 600: '#9EA1AA',\n 500: '#C5C9D4',\n 400: '#D1D4DD',\n 300: '#DCDFE5',\n 200: '#E8E9EE',\n 100: '#F3F4F6',\n },\n },\n\n // Custom additions to Tailwind's existing utility classes.\n // https://tailwindcss.com/docs/theme#extending-the-default-theme\n extend: {\n backgroundImage: {\n 'scroll-shadow': 'linear-gradient(0deg, rgb(197 201 212 / 35%), rgb(38 38 38 / 0%))',\n },\n\n borderWidth: {\n 6: '6px',\n 10: '10px',\n 12: '12px',\n },\n\n // .tw-shadow-*\n boxShadow: {\n // Modules or Images if necessary (Previously Shadow Low)\n DEFAULT: '0px 2px 2px 0px rgba(38, 38, 38, 0.05), 0px 2px 6px 0px rgba(38, 38, 38, 0.10)',\n\n // Cards Scroll Lock Modules like Global Nav or the Bulk Select Mobile Pattern\n md: '0px 3px 3px 1px rgba(38, 38, 38, 0.05), 0px 3px 12px 1px rgba(38, 38, 38, 0.10)',\n\n // TBD\n lg: '0px 6px 6px 0px rgba(38, 38, 38, 0.05), 0px 6px 18px 2px rgba(38, 38, 38, 0.10), 0px 6px 18px 2px rgba(38, 38, 38, 0.15)',\n\n // Floating UIs like the Zendesk Help center\n xl: '0px 12px 12px 0px rgba(38, 38, 38, 0.05), 0px 12px 12px 2px rgba(38, 38, 38, 0.10), 0px 12px 24px 2px rgba(38, 38, 38, 0.15)',\n\n // Dropdowns, Selects, Menus\n '2xl':\n '0px 18px 18px 4px rgba(38, 38, 38, 0.05), 0px 18px 18px 4px rgba(38, 38, 38, 0.10), 0px 18px 30px 0px rgba(38, 38, 38, 0.15)',\n\n // Dialogs, Modals and any other Overlay types (Previously Shadow High)\n '3xl':\n '0px 24px 24px 0px rgba(38, 38, 38, 0.05), 0px 24px 24px 8px rgba(38, 38, 38, 0.10), 0px 24px 48px 8px rgba(38, 38, 38, 0.15)',\n\n // @deprecated - use `tw-shadow` instead!\n low: '0 2px 4px rgba(0, 15, 35, 0.06)',\n\n // @deprecated - use `tw-shadow-3xl` instead!\n high: '0 4px 8px rgba(0, 15, 35, 0.06)',\n },\n\n // .tw-text-*\n // Note: All these font SIZES match tailwind! We're only overriding default\n // line-height to match LL typography & adjust for Sofia.\n fontSize: {\n '2xl': [\n '1.5rem',\n {\n lineHeight: 'calc(32/24)',\n },\n ],\n\n xl: [\n '1.25rem',\n {\n lineHeight: 'calc(28/20)',\n },\n ],\n\n base: [\n '1rem',\n {\n lineHeight: 'calc(24/16)',\n },\n ],\n\n sm: [\n '0.875rem',\n {\n lineHeight: 'calc(20/14)',\n },\n ],\n\n xs: [\n '0.75rem',\n {\n lineHeight: 'calc(16/12)',\n },\n ],\n },\n\n height: {\n input: '2.25rem', // 36px\n logo: '1.375rem', // 22px\n topbar: '3.5rem', // 56px\n chip: '1.375rem', // 22px\n },\n\n // .tw-max-h-*\n maxHeight: {\n 'select-menu': '18.75rem', // 300px - sharable with dropdown, date, etc.\n },\n\n // .tw-leading-*\n lineHeight: {\n initial: 'initial',\n '2xl': 'calc(32/24)',\n xl: 'calc(28/20)',\n base: 'calc(24/16)',\n // for backwards compatibility with LL typography line-heights\n body: '20/14',\n small: '16/12',\n button: '24/14',\n },\n\n // .tw-min-w-*\n minWidth: {\n auto: 'auto',\n input: '9rem', // 144px\n },\n\n // .tw-max-w-*\n maxWidth: {\n field: '18rem', // 288px - standard width used for form field elements\n initial: 'initial',\n container: '87.5rem', // 1400px - max width used for page content\n },\n\n // .tw-rotate-*\n rotate: {\n '270': '270deg',\n },\n\n // https://tailwindcss.com/docs/customizing-spacing\n spacing: {\n 15: '3.75rem', // 60px (same as ll-spacing-6 to help migrate)\n // This is the only tailwind setting dependent on a variable and this is because the\n // variable actually has responsive styles baked in, and there's no way to do that\n // with tailwind. Defined in `styles/base.css`.\n gutter: 'var(--grid-gutter)',\n sidebar: '17.5rem', // 280px\n },\n\n // .tw-w-*\n width: {\n container: '87.5rem', // 1400px\n 'inline-edit': '8.75rem', // 140px - standard width used for ll-inline-edit elements\n 'inline-edit-small': '5.6rem', // 90px - standard width used for smaller ll-inline-edit elements\n sidebar: '17.5rem', // 280px\n 'select-menu': '5rem', // 80px\n },\n\n // .tw-z-*\n zIndex: {\n '-10': '-10',\n '-20': '-20',\n '-30': '-30',\n behind: '-1',\n content: '100', // general content on the page\n control: '200', // for UI controls, widgets, buttons, etc. These are given one level higher priority\n page: '300', // applies to page-level blocks, ie. site-header, side-nav, etc\n screen: '400', // covers all \"standard\" things visible on the screen: page-level blocks, UI/control things, general content\n modal: '1000', // covers all things except dialogs, including other elements promoted along the z-axis.\n dialog: '1001', // covers all things, including other elements promoted along the z-axis.\n },\n\n animation: {\n grow: 'grow 1s',\n pulse: 'pulse 2s cubic-bezier(.4, 0, .6,1) infinite',\n shake: 'shake 1s ease 0s 1 normal none running',\n },\n\n keyframes: {\n grow: {\n 'from, to': {\n transform: 'scale3d(1, 1, 1)',\n },\n '50%': {\n transform: 'scale3d(1.25, 1.25, 1.25)',\n },\n },\n\n pulse: {\n '0%, 100%': { opacity: '1' },\n '50%': { opacity: '0.25' },\n },\n\n shake: {\n 'from, to': {\n transform: 'translate3d(0, 0, 0)',\n },\n '10%, 30%, 50%, 70%, 90%': {\n transform: 'translate3d(-10px, 0, 0)',\n },\n '20%, 40%, 60%, 80%': {\n transform: 'translate3d(10px, 0, 0)',\n },\n },\n },\n\n // .tw-ease-*\n transitionTimingFunction: {\n 'fast-out-slow-in': 'cubic-bezier(0.4, 0, 0.2, 1)',\n 'linear-out-slow-in': 'cubic-bezier(0, 0, 0.2, 1)',\n 'fast-out-linear-in': 'cubic-bezier(0.4, 0, 1, 1)',\n 'ease-in-out': 'cubic-bezier(0.4, 0, 0.6, 1)',\n 'fast-in-fast-out': 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n swing: 'cubic-bezier(0.25, 0.8, 0.5, 1)',\n },\n\n // .tw-duration-*\n transitionDuration: {\n snap: '0.1s',\n fast: '0.165s',\n brisk: '0.333s',\n slow: '0.5s',\n sleepy: '1s',\n },\n },\n },\n\n corePlugins: {\n // because we have our own\n container: false,\n preflight: false,\n },\n} satisfies Config;\n\n/**\n * Utility to return a holistic array of tailwind color classes.\n *\n * This function will allow downstream applications to easily **blocklist** the same color\n * classes that are safelisted in the base preset, just in case they need to prevent unnecessarily\n * duplicating classes in their final build.\n *\n * @see {@link https://tailwindcss.com/docs/content-configuration#discarding-classes}\n */\nexport const getColorClasses = () => {\n const classes: Array<string> = [];\n\n ['purple', 'royal', 'blue', 'seafoam', 'teal', 'green', 'yellow', 'orange', 'red', 'ice'].forEach((color) => {\n ['bg', 'text', 'border', 'stroke'].forEach((plugin) => {\n ['', '400'].forEach((shade) => {\n classes.push(`tw-${plugin}-${color}${shade ? `-${shade}` : ''}`);\n });\n });\n });\n\n return classes;\n};\n"],"names":["tailwindBase","SCREEN_SIZES","getColorClasses","classes","color","plugin","shade"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tailwind-base.js","sources":["../tailwind-base.ts"],"sourcesContent":["import type { Config } from 'tailwindcss';\n\nimport { SCREEN_SIZES } from './src/constants';\n\nexport default {\n content: [\n // Todo: can/should this be optimized? Where should we be looking for classes?\n './src/**/*.{vue,ts,tsx,js,jsx,mdx}',\n ],\n\n prefix: 'tw-',\n\n // ALWAYS include these color related classes. This allows us to dynamically\n // create color classes based on a color prop in our components instead of\n // listing the full class name like is encouraged in the docs.\n // https://tailwindcss.com/docs/content-configuration#using-regular-expressions\n //\n // Note: If any stash components change which color classes they dynamically build,\n // this needs to change. Keep this list as small as possible.\n //\n // Note: Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern\n // includes a variant modifier like /hover:bg-red-.+/.\n safelist: [\n {\n pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)$/,\n },\n // Illustration.vue stroke color.\n {\n pattern: /stroke-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-500$/,\n },\n // Illustration.vue dynamic text.\n {\n pattern: /text-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)-400$/,\n },\n // Dynamic bg color for components using the colorScheme function (Chip, Avatar, etc.)\n 'bg-ice-200',\n // These are custom classes that we might not use in our Stash code, but we\n // define in Stash and want to keep in the final CSS for downstream use.\n 'heading-jumbo',\n // allow white and black to be used dynamically\n 'bg-white',\n 'bg-black',\n 'text-white',\n 'text-black',\n 'border-white',\n 'border-black',\n ],\n\n // Conflicts with our own custom classes\n // https://tailwindcss.com/docs/content-configuration#discarding-classes\n blocklist: ['container'],\n\n theme: {\n screens: SCREEN_SIZES,\n\n fontFamily: {\n mono: ['monospace'],\n sans: ['Sofia', 'sans-serif'],\n /**\n * @deprecated - use `tw-font-sans` instead!\n */\n sofia: ['Sofia', 'sans-serif'],\n },\n\n colors: {\n white: '#fff',\n black: '#000',\n transparent: 'transparent',\n inherit: 'inherit',\n\n // --color-white: #ffffff;\n // --color-black: #000000;\n // --color-blue-hover: rgba(0,114,240,0.74902);\n // --color-red-hover: rgba(228,0,43,0.74902);\n // --color-ice-700-hover: rgba(118,121,127,0.11765);\n // --color-white-hover: rgba(255,255,255,0.11765);\n // --button-secondary-blue-hover: rgba(0,114,240,0.11765);\n // --button-secondary-red-hover: rgba(228,0,43,0.11765);\n\n // https://tailwindcss.com/docs/upgrade-guide#fill-and-stroke-use-color-palette\n current: 'currentColor',\n\n purple: {\n 900: '#06040F',\n 800: '#0C091E',\n 700: '#120D2D',\n 600: '#18123C',\n 500: '#1E164B',\n 400: '#4B456F',\n 300: '#787393',\n 200: '#A5A2B7',\n 100: '#D2D0DB',\n },\n\n royal: {\n 900: '#0A0C24',\n 800: '#131747',\n 700: '#1D236B',\n 600: '#262E8E',\n 500: '#303AB2',\n 400: '#5961C1',\n 300: '#8389D1',\n 200: '#ACB0E0',\n 100: '#D6D8F0',\n },\n\n blue: {\n 900: '#001730',\n 800: '#002E60',\n 700: '#004490',\n 600: '#005BC0',\n 500: '#0072F0',\n 400: '#338EF3',\n 300: '#66AAF6',\n 200: '#99C7F9',\n 100: '#CCE3FC',\n },\n\n teal: {\n 900: '#002528',\n 800: '#004B50',\n 700: '#017078',\n 600: '#0196A0',\n 500: '#01BBC8',\n 400: '#34C9D3',\n 300: '#67D6DE',\n 200: '#99E4E9',\n 100: '#CCF1F4',\n },\n\n green: {\n 900: '#062313',\n 800: '#0C4627',\n 700: '#11683A',\n 600: '#178B4E',\n 500: '#1DAE61',\n 400: '#4ABE81',\n 300: '#77CEA0',\n 200: '#A5DFC0',\n 100: '#D2EFDF',\n },\n\n seafoam: {\n 900: '#0C2C26',\n 800: '#18584D',\n 700: '#248373',\n 600: '#30AF9A',\n 500: '#3CDBC0',\n 400: '#63E2CD',\n 300: '#8AE9D9',\n 200: '#B1F1E6',\n 100: '#D8F8F2',\n },\n\n yellow: {\n 900: '#332A00',\n 800: '#665500',\n 700: '#997F00',\n 600: '#CCAA00',\n 500: '#FFD400',\n 400: '#FFDD33',\n 300: '#FFE566',\n 200: '#FFEE99',\n 100: '#FFF6CC',\n },\n\n orange: {\n 900: '#331E07',\n 800: '#663B0F',\n 700: '#995916',\n 600: '#CC761E',\n 500: '#FF9425',\n 400: '#FFA951',\n 300: '#FFBF7C',\n 200: '#FFD4A8',\n 100: '#FFEAD3',\n },\n\n red: {\n 900: '#2E0009',\n 800: '#5B0011',\n 700: '#89001A',\n 600: '#B60022',\n 500: '#E4002B',\n 400: '#E93355',\n 300: '#EF6680',\n 200: '#F499AA',\n 100: '#FACCD5',\n },\n\n ice: {\n 900: '#27282A',\n 800: '#4F5055',\n 700: '#76797F',\n 600: '#9EA1AA',\n 500: '#C5C9D4',\n 400: '#D1D4DD',\n 300: '#DCDFE5',\n 200: '#E8E9EE',\n 100: '#F3F4F6',\n },\n },\n\n // Custom additions to Tailwind's existing utility classes.\n // https://tailwindcss.com/docs/theme#extending-the-default-theme\n extend: {\n backgroundImage: {\n 'scroll-shadow': 'linear-gradient(0deg, rgb(197 201 212 / 35%), rgb(38 38 38 / 0%))',\n },\n\n borderWidth: {\n 6: '6px',\n 10: '10px',\n 12: '12px',\n },\n\n // .tw-shadow-*\n boxShadow: {\n // Modules or Images if necessary (Previously Shadow Low)\n DEFAULT: '0px 2px 2px 0px rgba(38, 38, 38, 0.05), 0px 2px 6px 0px rgba(38, 38, 38, 0.10)',\n\n // Cards Scroll Lock Modules like Global Nav or the Bulk Select Mobile Pattern\n md: '0px 3px 3px 1px rgba(38, 38, 38, 0.05), 0px 3px 12px 1px rgba(38, 38, 38, 0.10)',\n\n // TBD\n lg: '0px 6px 6px 0px rgba(38, 38, 38, 0.05), 0px 6px 18px 2px rgba(38, 38, 38, 0.10), 0px 6px 18px 2px rgba(38, 38, 38, 0.15)',\n\n // Floating UIs like the Zendesk Help center\n xl: '0px 12px 12px 0px rgba(38, 38, 38, 0.05), 0px 12px 12px 2px rgba(38, 38, 38, 0.10), 0px 12px 24px 2px rgba(38, 38, 38, 0.15)',\n\n // Dropdowns, Selects, Menus\n '2xl':\n '0px 18px 18px 4px rgba(38, 38, 38, 0.05), 0px 18px 18px 4px rgba(38, 38, 38, 0.10), 0px 18px 30px 0px rgba(38, 38, 38, 0.15)',\n\n // Dialogs, Modals and any other Overlay types (Previously Shadow High)\n '3xl':\n '0px 24px 24px 0px rgba(38, 38, 38, 0.05), 0px 24px 24px 8px rgba(38, 38, 38, 0.10), 0px 24px 48px 8px rgba(38, 38, 38, 0.15)',\n\n // @deprecated - use `tw-shadow` instead!\n low: '0 2px 4px rgba(0, 15, 35, 0.06)',\n\n // @deprecated - use `tw-shadow-3xl` instead!\n high: '0 4px 8px rgba(0, 15, 35, 0.06)',\n },\n\n // .tw-text-*\n // Note: All these font SIZES match tailwind! We're only overriding default\n // line-height to match LL typography & adjust for Sofia.\n fontSize: {\n '2xl': [\n '1.5rem',\n {\n lineHeight: 'calc(32/24)',\n },\n ],\n\n xl: [\n '1.25rem',\n {\n lineHeight: 'calc(28/20)',\n },\n ],\n\n base: [\n '1rem',\n {\n lineHeight: 'calc(24/16)',\n },\n ],\n\n sm: [\n '0.875rem',\n {\n lineHeight: 'calc(20/14)',\n },\n ],\n\n xs: [\n '0.75rem',\n {\n lineHeight: 'calc(16/12)',\n },\n ],\n },\n\n height: {\n input: '2.25rem', // 36px\n logo: '1.375rem', // 22px\n topbar: '3.5rem', // 56px\n chip: '1.375rem', // 22px\n },\n\n // .tw-max-h-*\n maxHeight: {\n 'select-menu': '18.75rem', // 300px - sharable with dropdown, date, etc.\n },\n\n // .tw-leading-*\n lineHeight: {\n initial: 'initial',\n '2xl': 'calc(32/24)',\n xl: 'calc(28/20)',\n base: 'calc(24/16)',\n // for backwards compatibility with LL typography line-heights\n body: '20/14',\n small: '16/12',\n button: '24/14',\n },\n\n // .tw-min-w-*\n minWidth: {\n auto: 'auto',\n input: '9rem', // 144px\n },\n\n // .tw-max-w-*\n maxWidth: {\n field: '18rem', // 288px - standard width used for form field elements\n initial: 'initial',\n container: '87.5rem', // 1400px - max width used for page content\n },\n\n // .tw-rotate-*\n rotate: {\n '270': '270deg',\n },\n\n // https://tailwindcss.com/docs/customizing-spacing\n spacing: {\n 15: '3.75rem', // 60px (same as ll-spacing-6 to help migrate)\n // This is the only tailwind setting dependent on a variable and this is because the\n // variable actually has responsive styles baked in, and there's no way to do that\n // with tailwind. Defined in `styles/base.css`.\n gutter: 'var(--grid-gutter)',\n sidebar: '17.5rem', // 280px\n },\n\n // .tw-w-*\n width: {\n container: '87.5rem', // 1400px\n 'inline-edit': '8.75rem', // 140px - standard width used for ll-inline-edit elements\n 'inline-edit-small': '5.6rem', // 90px - standard width used for smaller ll-inline-edit elements\n sidebar: '17.5rem', // 280px\n 'select-menu': '5rem', // 80px\n },\n\n // .tw-z-*\n zIndex: {\n '-10': '-10',\n '-20': '-20',\n '-30': '-30',\n behind: '-1',\n content: '100', // general content on the page\n control: '200', // for UI controls, widgets, buttons, etc. These are given one level higher priority\n page: '300', // applies to page-level blocks, ie. site-header, side-nav, etc\n screen: '400', // covers all \"standard\" things visible on the screen: page-level blocks, UI/control things, general content\n modal: '1000', // covers all things except dialogs, including other elements promoted along the z-axis.\n dialog: '1001', // covers all things, including other elements promoted along the z-axis.\n },\n\n animation: {\n grow: 'grow 1s',\n pulse: 'pulse 2s cubic-bezier(.4, 0, .6,1) infinite',\n shake: 'shake 1s ease 0s 1 normal none running',\n },\n\n keyframes: {\n grow: {\n 'from, to': {\n transform: 'scale3d(1, 1, 1)',\n },\n '50%': {\n transform: 'scale3d(1.25, 1.25, 1.25)',\n },\n },\n\n pulse: {\n '0%, 100%': { opacity: '1' },\n '50%': { opacity: '0.25' },\n },\n\n shake: {\n 'from, to': {\n transform: 'translate3d(0, 0, 0)',\n },\n '10%, 30%, 50%, 70%, 90%': {\n transform: 'translate3d(-10px, 0, 0)',\n },\n '20%, 40%, 60%, 80%': {\n transform: 'translate3d(10px, 0, 0)',\n },\n },\n },\n\n // .tw-ease-*\n transitionTimingFunction: {\n 'fast-out-slow-in': 'cubic-bezier(0.4, 0, 0.2, 1)',\n 'linear-out-slow-in': 'cubic-bezier(0, 0, 0.2, 1)',\n 'fast-out-linear-in': 'cubic-bezier(0.4, 0, 1, 1)',\n 'ease-in-out': 'cubic-bezier(0.4, 0, 0.6, 1)',\n 'fast-in-fast-out': 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n swing: 'cubic-bezier(0.25, 0.8, 0.5, 1)',\n },\n\n // .tw-duration-*\n transitionDuration: {\n snap: '0.1s',\n fast: '0.165s',\n brisk: '0.333s',\n slow: '0.5s',\n sleepy: '1s',\n },\n },\n },\n\n corePlugins: {\n // because we have our own\n container: false,\n preflight: false,\n },\n} satisfies Config;\n\n/**\n * Utility to return a holistic array of tailwind color classes.\n *\n * This function will allow downstream applications to easily **blocklist** the same color\n * classes that are safelisted in the base preset, just in case they need to prevent unnecessarily\n * duplicating classes in their final build.\n *\n * @see {@link https://tailwindcss.com/docs/content-configuration#discarding-classes}\n */\nexport const getColorClasses = () => {\n const classes: Array<string> = [];\n\n ['purple', 'royal', 'blue', 'seafoam', 'teal', 'green', 'yellow', 'orange', 'red', 'ice'].forEach((color) => {\n ['bg', 'text', 'border', 'stroke'].forEach((plugin) => {\n ['', '400'].forEach((shade) => {\n classes.push(`tw-${plugin}-${color}${shade ? `-${shade}` : ''}`);\n });\n });\n });\n\n return classes;\n};\n"],"names":["tailwindBase","SCREEN_SIZES","getColorClasses","classes","color","plugin","shade"],"mappings":";AAIA,MAAeA,IAAA;AAAA,EACb,SAAS;AAAA;AAAA,IAEP;AAAA,EACF;AAAA,EAEA,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYR,UAAU;AAAA,IACR;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAEA;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAEA;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAIA,WAAW,CAAC,WAAW;AAAA,EAEvB,OAAO;AAAA,IACL,SAASC;AAAA,IAET,YAAY;AAAA,MACV,MAAM,CAAC,WAAW;AAAA,MAClB,MAAM,CAAC,SAAS,YAAY;AAAA;AAAA;AAAA;AAAA,MAI5B,OAAO,CAAC,SAAS,YAAY;AAAA,IAC/B;AAAA,IAEA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYT,SAAS;AAAA,MAET,QAAQ;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,OAAO;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,OAAO;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,SAAS;AAAA,QACP,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,QAAQ;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,QAAQ;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,MAEA,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IAET;AAAA;AAAA;AAAA,IAIA,QAAQ;AAAA,MACN,iBAAiB;AAAA,QACf,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACX,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA;AAAA,MAGA,WAAW;AAAA;AAAA,QAET,SAAS;AAAA;AAAA,QAGT,IAAI;AAAA;AAAA,QAGJ,IAAI;AAAA;AAAA,QAGJ,IAAI;AAAA;AAAA,QAGJ,OACE;AAAA;AAAA,QAGF,OACE;AAAA;AAAA,QAGF,KAAK;AAAA;AAAA,QAGL,MAAM;AAAA,MACR;AAAA;AAAA;AAAA;AAAA,MAKA,UAAU;AAAA,QACR,OAAO;AAAA,UACL;AAAA,UACA;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QAEA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QAEA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QAEA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QAEA,IAAI;AAAA,UACF;AAAA,UACA;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MAEJ;AAAA,MAEA,QAAQ;AAAA,QACN,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,QACN,QAAQ;AAAA;AAAA,QACR,MAAM;AAAA;AAAA,MACR;AAAA;AAAA,MAGA,WAAW;AAAA,QACT,eAAe;AAAA;AAAA,MACjB;AAAA;AAAA,MAGA,YAAY;AAAA,QACV,SAAS;AAAA,QACT,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,MAAM;AAAA;AAAA,QAEN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA;AAAA,MAGA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,MAGA,UAAU;AAAA,QACR,OAAO;AAAA;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA;AAAA,MACb;AAAA;AAAA,MAGA,QAAQ;AAAA,QACN,KAAO;AAAA,MACT;AAAA;AAAA,MAGA,SAAS;AAAA,QACP,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,QAIJ,QAAQ;AAAA,QACR,SAAS;AAAA;AAAA,MACX;AAAA;AAAA,MAGA,OAAO;AAAA,QACL,WAAW;AAAA;AAAA,QACX,eAAe;AAAA;AAAA,QACf,qBAAqB;AAAA;AAAA,QACrB,SAAS;AAAA;AAAA,QACT,eAAe;AAAA;AAAA,MACjB;AAAA;AAAA,MAGA,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA;AAAA,QACT,SAAS;AAAA;AAAA,QACT,MAAM;AAAA;AAAA,QACN,QAAQ;AAAA;AAAA,QACR,OAAO;AAAA;AAAA,QACP,QAAQ;AAAA;AAAA,MACV;AAAA,MAEA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MAEA,WAAW;AAAA,QACT,MAAM;AAAA,UACJ,YAAY;AAAA,YACV,WAAW;AAAA,UACb;AAAA,UACA,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QAEf;AAAA,QAEA,OAAO;AAAA,UACL,YAAY,EAAE,SAAS,IAAI;AAAA,UAC3B,OAAO,EAAE,SAAS,OAAO;AAAA,QAC3B;AAAA,QAEA,OAAO;AAAA,UACL,YAAY;AAAA,YACV,WAAW;AAAA,UACb;AAAA,UACA,2BAA2B;AAAA,YACzB,WAAW;AAAA,UACb;AAAA,UACA,sBAAsB;AAAA,YACpB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MAEJ;AAAA;AAAA,MAGA,0BAA0B;AAAA,QACxB,oBAAoB;AAAA,QACpB,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,eAAe;AAAA,QACf,oBAAoB;AAAA,QACpB,OAAO;AAAA,MACT;AAAA;AAAA,MAGA,oBAAoB;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EAEJ;AAAA,EAEA,aAAa;AAAA;AAAA,IAEX,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,GAWaC,IAAkB,MAAM;AACnC,QAAMC,IAAyB,CAAC;AAEhC,UAAC,UAAU,SAAS,QAAQ,WAAW,QAAQ,SAAS,UAAU,UAAU,OAAO,KAAK,EAAE,QAAQ,CAACC,MAAU;AAC3G,KAAC,MAAM,QAAQ,UAAU,QAAQ,EAAE,QAAQ,CAACC,MAAW;AACrD,OAAC,IAAI,KAAK,EAAE,QAAQ,CAACC,MAAU;AACrB,QAAAH,EAAA,KAAK,MAAME,CAAM,IAAID,CAAK,GAAGE,IAAQ,IAAIA,CAAK,KAAK,EAAE,EAAE;AAAA,MAAA,CAChE;AAAA,IAAA,CACF;AAAA,EAAA,CACF,GAEMH;AACT;"}
|
package/package.json
CHANGED
package/styles/base.css
CHANGED
|
@@ -183,33 +183,6 @@
|
|
|
183
183
|
*/
|
|
184
184
|
|
|
185
185
|
@layer base {
|
|
186
|
-
@font-face {
|
|
187
|
-
font-family: Sofia;
|
|
188
|
-
font-style: normal;
|
|
189
|
-
font-weight: 400;
|
|
190
|
-
src:
|
|
191
|
-
url('/static/fonts/sofia/SofiaProRegular.woff2') format('woff2'),
|
|
192
|
-
url('/static/fonts/sofia/SofiaProRegular.woff') format('woff');
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
@font-face {
|
|
196
|
-
font-family: Sofia;
|
|
197
|
-
font-style: normal;
|
|
198
|
-
font-weight: 500;
|
|
199
|
-
src:
|
|
200
|
-
url('/static/fonts/sofia/SofiaProMedium.woff2') format('woff2'),
|
|
201
|
-
url('/static/fonts/sofia/SofiaProMedium.woff') format('woff');
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
@font-face {
|
|
205
|
-
font-family: Sofia;
|
|
206
|
-
font-style: normal;
|
|
207
|
-
font-weight: 600;
|
|
208
|
-
src:
|
|
209
|
-
url('/static/fonts/sofia/SofiaProSemiBold.woff2') format('woff2'),
|
|
210
|
-
url('/static/fonts/sofia/SofiaProSemiBold.woff') format('woff');
|
|
211
|
-
}
|
|
212
|
-
|
|
213
186
|
html {
|
|
214
187
|
-moz-osx-font-smoothing: grayscale;
|
|
215
188
|
-webkit-font-smoothing: antialiased;
|
|
@@ -219,9 +192,8 @@
|
|
|
219
192
|
}
|
|
220
193
|
|
|
221
194
|
body {
|
|
222
|
-
@apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm;
|
|
195
|
+
@apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm tw-font-sans;
|
|
223
196
|
|
|
224
|
-
font-family: Sofia, sans-serif;
|
|
225
197
|
min-height: 100vh;
|
|
226
198
|
position: relative;
|
|
227
199
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
|
|
3
|
+
@layer base {
|
|
4
|
+
@font-face {
|
|
5
|
+
font-family: Sofia;
|
|
6
|
+
font-style: normal;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
src:
|
|
9
|
+
url('/static/fonts/sofia/SofiaProRegular.woff2') format('woff2'),
|
|
10
|
+
url('/static/fonts/sofia/SofiaProRegular.woff') format('woff');
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@font-face {
|
|
14
|
+
font-family: Sofia;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
src:
|
|
18
|
+
url('/static/fonts/sofia/SofiaProMedium.woff2') format('woff2'),
|
|
19
|
+
url('/static/fonts/sofia/SofiaProMedium.woff') format('woff');
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@font-face {
|
|
23
|
+
font-family: Sofia;
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
src:
|
|
27
|
+
url('/static/fonts/sofia/SofiaProSemiBold.woff2') format('woff2'),
|
|
28
|
+
url('/static/fonts/sofia/SofiaProSemiBold.woff') format('woff');
|
|
29
|
+
}
|
|
30
|
+
}
|
package/tailwind-base.ts
CHANGED
|
@@ -53,10 +53,12 @@ export default {
|
|
|
53
53
|
theme: {
|
|
54
54
|
screens: SCREEN_SIZES,
|
|
55
55
|
|
|
56
|
-
// Creates classes like `.sofia` that applies the appropriate font family
|
|
57
|
-
// to our typography elements.
|
|
58
56
|
fontFamily: {
|
|
59
57
|
mono: ['monospace'],
|
|
58
|
+
sans: ['Sofia', 'sans-serif'],
|
|
59
|
+
/**
|
|
60
|
+
* @deprecated - use `tw-font-sans` instead!
|
|
61
|
+
*/
|
|
60
62
|
sofia: ['Sofia', 'sans-serif'],
|
|
61
63
|
},
|
|
62
64
|
|