Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@focus4/styling
Advanced tools
@focus4/styling - npm Package Compare versions
+1
-1
| { | ||
| "name": "@focus4/styling", | ||
| "version": "12.10.0", | ||
| "version": "12.11.0", | ||
| "description": "Focus v4, styling module", | ||
@@ -5,0 +5,0 @@ "main": "lib/focus4.styling.js", |
| html { | ||
| color: rgb(var(--color-black)); | ||
| font-size: var(--font-size-small); | ||
| line-height: 1.4; | ||
| font-family: var(--preferred-font); | ||
| } | ||
| body { | ||
| animation-duration: var(--animation-duration); | ||
| animation-delay: var(--animation-delay); | ||
| animation-timing-function: var(--animation-curve-default); | ||
| margin: 0; | ||
| } | ||
| textarea { | ||
| resize: vertical; | ||
| } | ||
| h1, h2, h3, h4, h5, h6 { | ||
| margin: 24px 0; | ||
| font-weight: 400; | ||
| } | ||
| h1 { | ||
| font-size: calc(3.5 * var(--font-size)); | ||
| letter-spacing: -.02em; | ||
| line-height: 1.35; | ||
| } | ||
| h2 { | ||
| font-size: calc(2.8 * var(--font-size)); | ||
| line-height: 48px; | ||
| } | ||
| h3 { | ||
| font-size: calc(2.2 * var(--font-size)); | ||
| line-height: 40px; | ||
| } | ||
| h4 { | ||
| font-size: calc(1.5 * var(--font-size)); | ||
| line-height: 32px; | ||
| } | ||
| h5 { | ||
| font-size: calc(1.25 * var(--font-size)); | ||
| font-weight: var(--font-weight-semi-bold); | ||
| letter-spacing: .02em; | ||
| line-height: 1; | ||
| } | ||
| h6 { | ||
| font-size: var(--font-size); | ||
| letter-spacing: .04em; | ||
| line-height: 24px; | ||
| } | ||
| th { | ||
| font-weight: normal; | ||
| } | ||
| :root { | ||
| --color-black: 0, 0, 0; | ||
| --color-white: 255, 255, 255; | ||
| --palette-red-50: 255, 235, 238; | ||
| --palette-red-100: 255, 205, 210; | ||
| --palette-red-200: 239, 154, 154; | ||
| --palette-red-300: 229, 115, 115; | ||
| --palette-red-400: 239, 83, 80; | ||
| --palette-red-500: 244, 67, 54; | ||
| --palette-red-600: 229, 57, 53; | ||
| --palette-red-700: 211, 47, 47; | ||
| --palette-red-800: 198, 40, 40; | ||
| --palette-red-900: 183, 28, 28; | ||
| --palette-red-a100: 255, 138, 128; | ||
| --palette-red-a200: 255, 82, 82; | ||
| --palette-red-a400: 255, 23, 68; | ||
| --palette-red-a700: 213, 0, 0; | ||
| --palette-pink-50: 252, 228, 236; | ||
| --palette-pink-100: 248, 187, 208; | ||
| --palette-pink-200: 244, 143, 177; | ||
| --palette-pink-300: 240, 98, 146; | ||
| --palette-pink-400: 236, 64, 122; | ||
| --palette-pink-500: 233, 30, 99; | ||
| --palette-pink-600: 216, 27, 96; | ||
| --palette-pink-700: 194, 24, 91; | ||
| --palette-pink-800: 173, 20, 87; | ||
| --palette-pink-900: 136, 14, 79; | ||
| --palette-pink-a100: 255, 128, 171; | ||
| --palette-pink-a200: 255, 64, 129; | ||
| --palette-pink-a400: 245, 0, 87; | ||
| --palette-pink-a700: 197, 17, 98; | ||
| --palette-purple-50: 243, 229, 245; | ||
| --palette-purple-100: 225, 190, 231; | ||
| --palette-purple-200: 206, 147, 216; | ||
| --palette-purple-300: 186, 104, 200; | ||
| --palette-purple-400: 171, 71, 188; | ||
| --palette-purple-500: 156, 39, 176; | ||
| --palette-purple-600: 142, 36, 170; | ||
| --palette-purple-700: 123, 31, 162; | ||
| --palette-purple-800: 106, 27, 154; | ||
| --palette-purple-900: 74, 20, 140; | ||
| --palette-purple-a100: 234, 128, 252; | ||
| --palette-purple-a200: 224, 64, 251; | ||
| --palette-purple-a400: 213, 0, 249; | ||
| --palette-purple-a700: 170, 0, 255; | ||
| --palette-deep-purple-50: 237, 231, 246; | ||
| --palette-deep-purple-100: 209, 196, 233; | ||
| --palette-deep-purple-200: 179, 157, 219; | ||
| --palette-deep-purple-300: 149, 117, 205; | ||
| --palette-deep-purple-400: 126, 87, 194; | ||
| --palette-deep-purple-500: 103, 58, 183; | ||
| --palette-deep-purple-600: 94, 53, 177; | ||
| --palette-deep-purple-700: 81, 45, 168; | ||
| --palette-deep-purple-800: 69, 39, 160; | ||
| --palette-deep-purple-900: 49, 27, 146; | ||
| --palette-deep-purple-a100: 179, 136, 255; | ||
| --palette-deep-purple-a200: 124, 77, 255; | ||
| --palette-deep-purple-a400: 101, 31, 255; | ||
| --palette-deep-purple-a700: 98, 0, 234; | ||
| --palette-indigo-50: 232, 234, 246; | ||
| --palette-indigo-100: 197, 202, 233; | ||
| --palette-indigo-200: 159, 168, 218; | ||
| --palette-indigo-300: 121, 134, 203; | ||
| --palette-indigo-400: 92, 107, 192; | ||
| --palette-indigo-500: 63, 81, 181; | ||
| --palette-indigo-600: 57, 73, 171; | ||
| --palette-indigo-700: 48, 63, 159; | ||
| --palette-indigo-800: 40, 53, 147; | ||
| --palette-indigo-900: 26, 35, 126; | ||
| --palette-indigo-a100: 140, 158, 255; | ||
| --palette-indigo-a200: 83, 109, 254; | ||
| --palette-indigo-a400: 61, 90, 254; | ||
| --palette-indigo-a700: 48, 79, 254; | ||
| --palette-blue-50: 227, 242, 253; | ||
| --palette-blue-100: 187, 222, 251; | ||
| --palette-blue-200: 144, 202, 249; | ||
| --palette-blue-300: 100, 181, 246; | ||
| --palette-blue-400: 66, 165, 245; | ||
| --palette-blue-500: 33, 150, 243; | ||
| --palette-blue-600: 30, 136, 229; | ||
| --palette-blue-700: 25, 118, 210; | ||
| --palette-blue-800: 21, 101, 192; | ||
| --palette-blue-900: 13, 71, 161; | ||
| --palette-blue-a100: 130, 177, 255; | ||
| --palette-blue-a200: 68, 138, 255; | ||
| --palette-blue-a400: 41, 121, 255; | ||
| --palette-blue-a700: 41, 98, 255; | ||
| --palette-light-blue-50: 225, 245, 254; | ||
| --palette-light-blue-100: 179, 229, 252; | ||
| --palette-light-blue-200: 129, 212, 250; | ||
| --palette-light-blue-300: 79, 195, 247; | ||
| --palette-light-blue-400: 41, 182, 246; | ||
| --palette-light-blue-500: 3, 169, 244; | ||
| --palette-light-blue-600: 3, 155, 229; | ||
| --palette-light-blue-700: 2, 136, 209; | ||
| --palette-light-blue-800: 2, 119, 189; | ||
| --palette-light-blue-900: 1, 87, 155; | ||
| --palette-light-blue-a100: 128, 216, 255; | ||
| --palette-light-blue-a200: 64, 196, 255; | ||
| --palette-light-blue-a400: 0, 176, 255; | ||
| --palette-light-blue-a700: 0, 145, 234; | ||
| --palette-cyan-50: 224, 247, 250; | ||
| --palette-cyan-100: 178, 235, 242; | ||
| --palette-cyan-200: 128, 222, 234; | ||
| --palette-cyan-300: 77, 208, 225; | ||
| --palette-cyan-400: 38, 198, 218; | ||
| --palette-cyan-500: 0, 188, 212; | ||
| --palette-cyan-600: 0, 172, 193; | ||
| --palette-cyan-700: 0, 151, 167; | ||
| --palette-cyan-800: 0, 131, 143; | ||
| --palette-cyan-900: 0, 96, 100; | ||
| --palette-cyan-a100: 132, 255, 255; | ||
| --palette-cyan-a200: 24, 255, 255; | ||
| --palette-cyan-a400: 0, 229, 255; | ||
| --palette-cyan-a700: 0, 184, 212; | ||
| --palette-teal-50: 224, 242, 241; | ||
| --palette-teal-100: 178, 223, 219; | ||
| --palette-teal-200: 128, 203, 196; | ||
| --palette-teal-300: 77, 182, 172; | ||
| --palette-teal-400: 38, 166, 154; | ||
| --palette-teal-500: 0, 150, 136; | ||
| --palette-teal-600: 0, 137, 123; | ||
| --palette-teal-700: 0, 121, 107; | ||
| --palette-teal-800: 0, 105, 92; | ||
| --palette-teal-900: 0, 77, 64; | ||
| --palette-teal-a100: 167, 255, 235; | ||
| --palette-teal-a200: 100, 255, 218; | ||
| --palette-teal-a400: 29, 233, 182; | ||
| --palette-teal-a700: 0, 191, 165; | ||
| --palette-green-50: 232, 245, 233; | ||
| --palette-green-100: 200, 230, 201; | ||
| --palette-green-200: 165, 214, 167; | ||
| --palette-green-300: 129, 199, 132; | ||
| --palette-green-400: 102, 187, 106; | ||
| --palette-green-500: 76, 175, 80; | ||
| --palette-green-600: 67, 160, 71; | ||
| --palette-green-700: 56, 142, 60; | ||
| --palette-green-800: 46, 125, 50; | ||
| --palette-green-900: 27, 94, 32; | ||
| --palette-green-a100: 185, 246, 202; | ||
| --palette-green-a200: 105, 240, 174; | ||
| --palette-green-a400: 0, 230, 118; | ||
| --palette-green-a700: 0, 200, 83; | ||
| --palette-light-green-50: 241, 248, 233; | ||
| --palette-light-green-100: 220, 237, 200; | ||
| --palette-light-green-200: 197, 225, 165; | ||
| --palette-light-green-300: 174, 213, 129; | ||
| --palette-light-green-400: 156, 204, 101; | ||
| --palette-light-green-500: 139, 195, 74; | ||
| --palette-light-green-600: 124, 179, 66; | ||
| --palette-light-green-700: 104, 159, 56; | ||
| --palette-light-green-800: 85, 139, 47; | ||
| --palette-light-green-900: 51, 105, 30; | ||
| --palette-light-green-a100: 204, 255, 144; | ||
| --palette-light-green-a200: 178, 255, 89; | ||
| --palette-light-green-a400: 118, 255, 3; | ||
| --palette-light-green-a700: 100, 221, 23; | ||
| --palette-lime-50: 249, 251, 231; | ||
| --palette-lime-100: 240, 244, 195; | ||
| --palette-lime-200: 230, 238, 156; | ||
| --palette-lime-300: 220, 231, 117; | ||
| --palette-lime-400: 212, 225, 87; | ||
| --palette-lime-500: 205, 220, 57; | ||
| --palette-lime-600: 192, 202, 51; | ||
| --palette-lime-700: 175, 180, 43; | ||
| --palette-lime-800: 158, 157, 36; | ||
| --palette-lime-900: 130, 119, 23; | ||
| --palette-lime-a100: 244, 255, 129; | ||
| --palette-lime-a200: 238, 255, 65; | ||
| --palette-lime-a400: 198, 255, 0; | ||
| --palette-lime-a700: 174, 234, 0; | ||
| --palette-yellow-50: 255, 253, 231; | ||
| --palette-yellow-100: 255, 249, 196; | ||
| --palette-yellow-200: 255, 245, 157; | ||
| --palette-yellow-300: 255, 241, 118; | ||
| --palette-yellow-400: 255, 238, 88; | ||
| --palette-yellow-500: 255, 235, 59; | ||
| --palette-yellow-600: 253, 216, 53; | ||
| --palette-yellow-700: 251, 192, 45; | ||
| --palette-yellow-800: 249, 168, 37; | ||
| --palette-yellow-900: 245, 127, 23; | ||
| --palette-yellow-a100: 255, 255, 141; | ||
| --palette-yellow-a200: 255, 255, 0; | ||
| --palette-yellow-a400: 255, 234, 0; | ||
| --palette-yellow-a700: 255, 214, 0; | ||
| --palette-amber-50: 255, 248, 225; | ||
| --palette-amber-100: 255, 236, 179; | ||
| --palette-amber-200: 255, 224, 130; | ||
| --palette-amber-300: 255, 213, 79; | ||
| --palette-amber-400: 255, 202, 40; | ||
| --palette-amber-500: 255, 193, 7; | ||
| --palette-amber-600: 255, 179, 0; | ||
| --palette-amber-700: 255, 160, 0; | ||
| --palette-amber-800: 255, 143, 0; | ||
| --palette-amber-900: 255, 111, 0; | ||
| --palette-amber-a100: 255, 229, 127; | ||
| --palette-amber-a200: 255, 215, 64; | ||
| --palette-amber-a400: 255, 196, 0; | ||
| --palette-amber-a700: 255, 171, 0; | ||
| --palette-orange-50: 255, 243, 224; | ||
| --palette-orange-100: 255, 224, 178; | ||
| --palette-orange-200: 255, 204, 128; | ||
| --palette-orange-300: 255, 183, 77; | ||
| --palette-orange-400: 255, 167, 38; | ||
| --palette-orange-500: 255, 152, 0; | ||
| --palette-orange-600: 251, 140, 0; | ||
| --palette-orange-700: 245, 124, 0; | ||
| --palette-orange-800: 239, 108, 0; | ||
| --palette-orange-900: 230, 81, 0; | ||
| --palette-orange-a100: 255, 209, 128; | ||
| --palette-orange-a200: 255, 171, 64; | ||
| --palette-orange-a400: 255, 145, 0; | ||
| --palette-orange-a700: 255, 109, 0; | ||
| --palette-deep-orange-50: 251, 233, 231; | ||
| --palette-deep-orange-100: 255, 204, 188; | ||
| --palette-deep-orange-200: 255, 171, 145; | ||
| --palette-deep-orange-300: 255, 138, 101; | ||
| --palette-deep-orange-400: 255, 112, 67; | ||
| --palette-deep-orange-500: 255, 87, 34; | ||
| --palette-deep-orange-600: 244, 81, 30; | ||
| --palette-deep-orange-700: 230, 74, 25; | ||
| --palette-deep-orange-800: 216, 67, 21; | ||
| --palette-deep-orange-900: 191, 54, 12; | ||
| --palette-deep-orange-a100: 255, 158, 128; | ||
| --palette-deep-orange-a200: 255, 110, 64; | ||
| --palette-deep-orange-a400: 255, 61, 0; | ||
| --palette-deep-orange-a700: 221, 44, 0; | ||
| --palette-brown-50: 239, 235, 233; | ||
| --palette-brown-100: 215, 204, 200; | ||
| --palette-brown-200: 188, 170, 164; | ||
| --palette-brown-300: 161, 136, 127; | ||
| --palette-brown-400: 141, 110, 99; | ||
| --palette-brown-500: 121, 85, 72; | ||
| --palette-brown-600: 109, 76, 65; | ||
| --palette-brown-700: 93, 64, 55; | ||
| --palette-brown-800: 78, 52, 46; | ||
| --palette-brown-900: 62, 39, 35; | ||
| --palette-grey-50: 250, 250, 250; | ||
| --palette-grey-100: 245, 245, 245; | ||
| --palette-grey-200: 238, 238, 238; | ||
| --palette-grey-300: 224, 224, 224; | ||
| --palette-grey-400: 189, 189, 189; | ||
| --palette-grey-500: 158, 158, 158; | ||
| --palette-grey-600: 117, 117, 117; | ||
| --palette-grey-700: 97, 97, 97; | ||
| --palette-grey-800: 66, 66, 66; | ||
| --palette-grey-900: 33, 33, 33; | ||
| --palette-blue-grey-50: 236, 239, 241; | ||
| --palette-blue-grey-100: 207, 216, 220; | ||
| --palette-blue-grey-200: 176, 190, 197; | ||
| --palette-blue-grey-300: 144, 164, 174; | ||
| --palette-blue-grey-400: 120, 144, 156; | ||
| --palette-blue-grey-500: 96, 125, 139; | ||
| --palette-blue-grey-600: 84, 110, 122; | ||
| --palette-blue-grey-700: 69, 90, 100; | ||
| --palette-blue-grey-800: 55, 71, 79; | ||
| --palette-blue-grey-900: 38, 50, 56; | ||
| } | ||
| :root[dark] { | ||
| --color-black: 238, 238, 238; | ||
| --color-white: 11, 11, 11; | ||
| --palette-grey-50: 22, 22, 22; | ||
| --palette-grey-100: 33, 33, 33; | ||
| --palette-grey-200: 44, 44, 44; | ||
| --palette-grey-300: 66, 66, 66; | ||
| --palette-grey-400: 97, 97, 97; | ||
| --palette-grey-500: 117, 117, 117; | ||
| --palette-grey-600: 158, 158, 158; | ||
| --palette-grey-700: 189, 189, 189; | ||
| --palette-grey-800: 224, 224, 224; | ||
| --palette-grey-900: 238, 238, 238; | ||
| } | ||
| :root { | ||
| --color-primary: var(--palette-indigo-500); | ||
| --color-primary-light: var(--palette-indigo-100); | ||
| --color-accent: var(--palette-pink-a200); | ||
| --color-divider: var(--palette-grey-300); | ||
| --preferred-font: "Roboto", "Helvetica", "Arial", sans-serif; | ||
| --font-size: 16px; | ||
| --font-size-small: 14px; | ||
| --font-size-big: 18px; | ||
| --font-weight-semi-bold: 500; | ||
| --font-weight-bold: 700; | ||
| --shadow-2p: 0 2px 2px 0 #00000024, 0 3px 1px -2px #0003, 0 1px 5px 0 #0000001f; | ||
| --shadow-4p: 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f, 0 2px 4px -1px #0003; | ||
| --animation-duration: .35s; | ||
| --animation-duration-short: .2s; | ||
| --animation-delay: calc(var(--animation-duration) / 5); | ||
| --animation-curve-fast-out-slow-in: cubic-bezier(.4, 0, .2, 1); | ||
| --animation-curve-fast-out-linear-in: cubic-bezier(.4, 0, 1, 1); | ||
| --animation-curve-focus-ring: cubic-bezier(.2, 0, 0, 1); | ||
| --animation-curve-default: var(--animation-curve-fast-out-slow-in); | ||
| --z-index-highest: 300; | ||
| --z-index-higher: 200; | ||
| --z-index-high: 100; | ||
| --z-index-normal: 1; | ||
| } | ||
| :root[dark] { | ||
| color-scheme: dark; | ||
| --color-primary: var(--palette-indigo-300); | ||
| --color-primary-light: var(--palette-indigo-900); | ||
| --color-accent: var(--palette-pink-a100); | ||
| } |
| import * as react from "react"; | ||
| import { ReactNode } from "react"; | ||
| import * as react_jsx_runtime0 from "react/jsx-runtime"; | ||
| //#region src/animation.d.ts | ||
| /** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */ | ||
| declare function getDefaultTransition(): { | ||
| readonly delay: number; | ||
| readonly duration: number; | ||
| readonly ease: [number, number, number, number] | undefined; | ||
| }; | ||
| /** Récupère les paramètres de transition "spring" par défaut. */ | ||
| declare function getSpringTransition(): { | ||
| readonly type: "spring"; | ||
| readonly bounce: 0; | ||
| readonly duration: number; | ||
| }; | ||
| //#endregion | ||
| //#region src/config.d.ts | ||
| /** Config Focus de l'application */ | ||
| declare const uiConfig: { | ||
| /** Valeur de "autocomplete" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */autocompleteOffValue: string; /** Classe CSS par défaut des icônes. */ | ||
| defaultIconClassName: string; | ||
| }; | ||
| //#endregion | ||
| //#region src/theme/common.d.ts | ||
| type CSSElement<T> = T & string & { | ||
| _element: void; | ||
| }; | ||
| type CSSMod<N extends string, T> = N & T & string & { | ||
| _mod: void; | ||
| }; | ||
| type CSSToStrings<T> = { [P in keyof T]?: string }; | ||
| type Mods<CSS, E> = { [P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never }[keyof CSS]; | ||
| type ModNames<CSS, E> = { [P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never }[keyof CSS]; | ||
| type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => { [_ in ModNames<CSS, E> | P]: string }) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: { [_ in Mods<CSS, E>]?: boolean }) => string); | ||
| interface CSSContext { | ||
| [key: string]: {}; | ||
| } | ||
| declare const ThemeContext: react.Context<CSSContext>; | ||
| //#endregion | ||
| //#region src/theme/themeable.d.ts | ||
| /** Merges passed themes by concatenating string keys */ | ||
| declare function themeable<T extends {}>(...themes: T[]): T; | ||
| //#endregion | ||
| //#region src/theme/theme-provider.d.ts | ||
| /** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */ | ||
| interface FocusCSSContext extends CSSContext { | ||
| actionBar: {}; | ||
| advancedSearch: {}; | ||
| contextualActions: {}; | ||
| facet: {}; | ||
| facetBox: {}; | ||
| group: {}; | ||
| list: {}; | ||
| listBase: {}; | ||
| searchBar: {}; | ||
| summary: {}; | ||
| table: {}; | ||
| timeline: {}; | ||
| booleanRadio: {}; | ||
| display: {}; | ||
| field: {}; | ||
| form: {}; | ||
| inputDate: {}; | ||
| inputFile: {}; | ||
| label: {}; | ||
| select: {}; | ||
| selectCheckbox: {}; | ||
| selectChips: {}; | ||
| selectRadio: {}; | ||
| dialog: {}; | ||
| filAriane: {}; | ||
| header: {}; | ||
| lateralMenu: {}; | ||
| layout: {}; | ||
| mainMenu: {}; | ||
| overlay: {}; | ||
| panel: {}; | ||
| popin: {}; | ||
| scrollable: {}; | ||
| scrollspy: {}; | ||
| autocomplete: {}; | ||
| button: {}; | ||
| calendar: {}; | ||
| checkbox: {}; | ||
| chip: {}; | ||
| dropdown: {}; | ||
| floatingActionButton: {}; | ||
| iconButton: {}; | ||
| menu: {}; | ||
| progressIndicator: {}; | ||
| radio: {}; | ||
| ripple: {}; | ||
| slider: {}; | ||
| snackbar: {}; | ||
| supportingText: {}; | ||
| switch: {}; | ||
| textField: {}; | ||
| tabs: {}; | ||
| tooltip: {}; | ||
| } | ||
| /** Props du ThemeProvider. */ | ||
| interface ThemeProviderProps { | ||
| /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé. */ | ||
| appTheme: Partial<FocusCSSContext>; | ||
| /** Enfants. */ | ||
| children: ReactNode; | ||
| } | ||
| /** | ||
| * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés | ||
| * à l'intérieur (via un context React). | ||
| * | ||
| * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent, | ||
| * y compris sur les mêmes composants. | ||
| */ | ||
| declare function ThemeProvider({ | ||
| appTheme, | ||
| children | ||
| }: ThemeProviderProps): react_jsx_runtime0.JSX.Element; | ||
| //#endregion | ||
| //#region src/theme/to-bem.d.ts | ||
| type AllMods<CSS> = { [P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never }[keyof CSS]; | ||
| type ToBem<CSS> = Omit<{ [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E> ? BemFunction<CSS, P, E> : CSS[P] extends CSSMod<infer __, infer ___> ? never : BemFunction<CSS, P, string> }, AllMods<CSS>>; | ||
| type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>; | ||
| /** | ||
| * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM | ||
| * en un objet contenant une fonction par "élément" à laquelle on peut appliquer ses "modificateurs". | ||
| * | ||
| * Par exemple, un objet contenant les classes | ||
| * ```ts | ||
| * ["panel", "panel--editing", "panel--loading", "title", "title--top", "title--bottom"] | ||
| * ``` | ||
| * sera transformé en un objet avec 2 fonctions `panel` et `title` : | ||
| * ```ts | ||
| * { | ||
| * panel({editing?: boolean; loading?: boolean}) => string; | ||
| * title({top?: boolean; bottom?: boolean}) => string; | ||
| * } | ||
| * ``` | ||
| * Un appel à une fonction retournera la classe CSS de l'"élément", à laquelle seront ajoutées ou non les classes des différents "modificateurs", | ||
| * selon les valeurs des différents booléens. | ||
| * | ||
| * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres. | ||
| * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange. | ||
| * | ||
| * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._ | ||
| * | ||
| * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._ | ||
| */ | ||
| declare function toBem<CSS>(css: CSS): ToBem<CSS>; | ||
| /** | ||
| * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet | ||
| * qui contient toutes les classes CSS qui le compose. | ||
| */ | ||
| declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>; | ||
| //#endregion | ||
| //#region src/theme/use-theme.d.ts | ||
| /** | ||
| * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS | ||
| * passées en paramètre. | ||
| * | ||
| * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`. | ||
| * | ||
| * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider` | ||
| * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte. | ||
| */ | ||
| declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>; | ||
| //#endregion | ||
| export { type CSSContext, type CSSElement, type CSSMod, type CSSProp, type CSSToStrings, type FocusCSSContext, ThemeContext, ThemeProvider, type ThemeProviderProps, type ToBem, fromBem, getDefaultTransition, getSpringTransition, themeable, toBem, uiConfig, useTheme }; | ||
| //# sourceMappingURL=focus4.styling.d.ts.map |
| {"version":3,"file":"focus4.styling.d.ts","names":[],"sources":["../src/animation.ts","../src/config.ts","../src/theme/common.ts","../src/theme/themeable.ts","../src/theme/theme-provider.tsx","../src/theme/to-bem.ts","../src/theme/use-theme.ts"],"mappings":"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"} |
| import { createContext, useContext, useMemo } from "react"; | ||
| import classNames from "classnames"; | ||
| import { pick } from "es-toolkit"; | ||
| import { jsx } from "react/jsx-runtime"; | ||
| //#region src/animation.ts | ||
| function get() { | ||
| const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body); | ||
| return { | ||
| delay: toMs(animationDelay), | ||
| duration: toMs(animationDuration), | ||
| ease: animationTimingFunction.startsWith("cubic-bezier") ? animationTimingFunction.slice(13).split(",").map(parseFloat) : void 0 | ||
| }; | ||
| } | ||
| /** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */ | ||
| function getDefaultTransition() { | ||
| const { delay, duration, ease } = get(); | ||
| return { | ||
| delay: delay / 1e3, | ||
| duration: duration / 1e3, | ||
| ease | ||
| }; | ||
| } | ||
| /** Récupère les paramètres de transition "spring" par défaut. */ | ||
| function getSpringTransition() { | ||
| return { | ||
| type: "spring", | ||
| bounce: 0, | ||
| duration: get().duration / 1e3 | ||
| }; | ||
| } | ||
| function toMs(d) { | ||
| if (d.endsWith("ms")) return +d.slice(0, -2); | ||
| else return +d.slice(0, -1) * 1e3; | ||
| } | ||
| //#endregion | ||
| //#region src/config.ts | ||
| /** Config Focus de l'application */ | ||
| const uiConfig = { | ||
| autocompleteOffValue: /Firefox/.test(navigator.userAgent) ? "off" : "one-time-code", | ||
| defaultIconClassName: "material-symbols-outlined" | ||
| }; | ||
| //#endregion | ||
| //#region src/theme/common.ts | ||
| const ThemeContext = createContext({}); | ||
| //#endregion | ||
| //#region src/theme/themeable.ts | ||
| /** Merges passed themes by concatenating string keys */ | ||
| function themeable(...themes) { | ||
| return themes.reduce(merge, {}); | ||
| } | ||
| function merge(original = {}, mixin = {}) { | ||
| const result = Object.keys(original).reduce((acc, key) => { | ||
| const value = original[key]; | ||
| if (typeof value !== "function") acc[key] = value; | ||
| return acc; | ||
| }, {}); | ||
| for (const key in mixin) { | ||
| const originalValue = result[key]; | ||
| const mixinValue = mixin[key]; | ||
| switch (typeof mixinValue) { | ||
| case "undefined": | ||
| case "function": break; | ||
| default: | ||
| switch (typeof originalValue) { | ||
| case "undefined": | ||
| result[key] = mixinValue; | ||
| break; | ||
| case "function": break; | ||
| default: | ||
| result[key] = [...originalValue.split(" "), ...mixinValue.split(" ")].filter((item, pos, self) => self.indexOf(item) === pos && item !== "").join(" "); | ||
| break; | ||
| } | ||
| break; | ||
| } | ||
| } | ||
| return result; | ||
| } | ||
| //#endregion | ||
| //#region src/theme/to-bem.ts | ||
| /** | ||
| * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM | ||
| * en un objet contenant une fonction par "élément" à laquelle on peut appliquer ses "modificateurs". | ||
| * | ||
| * Par exemple, un objet contenant les classes | ||
| * ```ts | ||
| * ["panel", "panel--editing", "panel--loading", "title", "title--top", "title--bottom"] | ||
| * ``` | ||
| * sera transformé en un objet avec 2 fonctions `panel` et `title` : | ||
| * ```ts | ||
| * { | ||
| * panel({editing?: boolean; loading?: boolean}) => string; | ||
| * title({top?: boolean; bottom?: boolean}) => string; | ||
| * } | ||
| * ``` | ||
| * Un appel à une fonction retournera la classe CSS de l'"élément", à laquelle seront ajoutées ou non les classes des différents "modificateurs", | ||
| * selon les valeurs des différents booléens. | ||
| * | ||
| * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres. | ||
| * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange. | ||
| * | ||
| * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._ | ||
| * | ||
| * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._ | ||
| */ | ||
| function toBem(css) { | ||
| const data = {}; | ||
| for (const key in css) { | ||
| const [element, modifier] = key.split("--"); | ||
| if (data[element] && modifier) data[element].push(modifier); | ||
| else if (!data[element]) data[element] = modifier ? [modifier] : []; | ||
| } | ||
| return Object.keys(data).reduce((bem, key) => ({ | ||
| ...bem, | ||
| [key]: (mods = {}) => { | ||
| if (mods !== true) return classNames(css[key], ...data[key].filter((mod) => mods[mod]).map((mod) => css[`${key}--${mod}`])); | ||
| else return pick(css, [key, ...data[key].map((mod) => `${key}--${mod}`)]); | ||
| } | ||
| }), {}); | ||
| } | ||
| /** | ||
| * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet | ||
| * qui contient toutes les classes CSS qui le compose. | ||
| */ | ||
| function fromBem(css) { | ||
| const res = {}; | ||
| for (const key in css) { | ||
| const value = css[key]; | ||
| if (value) if (typeof value === "string") res[key] = value; | ||
| else Object.assign(res, value(true)); | ||
| } | ||
| return res; | ||
| } | ||
| //#endregion | ||
| //#region src/theme/theme-provider.tsx | ||
| /** | ||
| * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés | ||
| * à l'intérieur (via un context React). | ||
| * | ||
| * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent, | ||
| * y compris sur les mêmes composants. | ||
| */ | ||
| function ThemeProvider({ appTheme, children }) { | ||
| const context = useContext(ThemeContext); | ||
| const mergedContext = useMemo(() => { | ||
| const mc = {}; | ||
| for (const key in context) if (key in appTheme && appTheme[key]) mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key])); | ||
| else mc[key] = context[key]; | ||
| for (const key in appTheme) if (!(key in context) && appTheme[key]) mc[key] = appTheme[key]; | ||
| return mc; | ||
| }, [appTheme, context]); | ||
| return /* @__PURE__ */ jsx(ThemeContext.Provider, { | ||
| value: mergedContext, | ||
| children | ||
| }); | ||
| } | ||
| //#endregion | ||
| //#region src/theme/use-theme.ts | ||
| /** | ||
| * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS | ||
| * passées en paramètre. | ||
| * | ||
| * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`. | ||
| * | ||
| * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider` | ||
| * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte. | ||
| */ | ||
| function useTheme(name, ...themes) { | ||
| return toBem(themeable(fromBem(useContext(ThemeContext)[name]) || {}, ...themes.filter((x) => x).map((x) => fromBem(x)))); | ||
| } | ||
| //#endregion | ||
| export { ThemeContext, ThemeProvider, fromBem, getDefaultTransition, getSpringTransition, themeable, toBem, uiConfig, useTheme }; | ||
| //# sourceMappingURL=focus4.styling.js.map |
| {"version":3,"file":"focus4.styling.js","names":[],"sources":["../src/animation.ts","../src/config.ts","../src/theme/common.ts","../src/theme/themeable.ts","../src/theme/to-bem.ts","../src/theme/theme-provider.tsx","../src/theme/use-theme.ts"],"sourcesContent":["function get() {\r\n const {animationDelay, animationDuration, animationTimingFunction} = window.getComputedStyle(document.body);\r\n\r\n const delay = toMs(animationDelay);\r\n const duration = toMs(animationDuration);\r\n const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\r\n ? (animationTimingFunction.slice(13).split(\",\").map(parseFloat) as [number, number, number, number])\r\n : undefined;\r\n\r\n return {delay, duration, ease};\r\n}\r\n\r\n/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */\r\nexport function getDefaultTransition() {\r\n const {delay, duration, ease} = get();\r\n return {\r\n delay: delay / 1000,\r\n duration: duration / 1000,\r\n ease\r\n } as const;\r\n}\r\n\r\n/** Récupère les paramètres de transition \"spring\" par défaut. */\r\nexport function getSpringTransition() {\r\n return {\r\n type: \"spring\",\r\n bounce: 0,\r\n duration: get().duration / 1000\r\n } as const;\r\n}\r\n\r\nfunction toMs(d: string) {\r\n if (d.endsWith(\"ms\")) {\r\n return +d.slice(0, -2);\r\n } else {\r\n return +d.slice(0, -1) * 1000;\r\n }\r\n}\r\n","/** Config Focus de l'application */\r\nexport const uiConfig = {\r\n /** Valeur de \"autocomplete\" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */\r\n autocompleteOffValue: /Firefox/.test(navigator.userAgent) ? \"off\" : \"one-time-code\",\r\n\r\n /** Classe CSS par défaut des icônes. */\r\n defaultIconClassName: \"material-symbols-outlined\"\r\n};\r\n","import {createContext} from \"react\";\r\n\r\nexport type CSSElement<T> = T & string & {_element: void};\r\nexport type CSSMod<N extends string, T> = N & T & string & {_mod: void};\r\nexport type CSSToStrings<T> = {[P in keyof T]?: string};\r\n\r\nexport type Mods<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never}[keyof CSS];\r\nexport type ModNames<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never}[keyof CSS];\r\nexport type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {\r\n [_ in ModNames<CSS, E> | P]: string;\r\n}) &\r\n (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {[_ in Mods<CSS, E>]?: boolean}) => string);\r\n\r\nexport interface CSSContext {\r\n [key: string]: {};\r\n}\r\n\r\nexport const ThemeContext = createContext<CSSContext>({});\r\n","/** Merges passed themes by concatenating string keys */\r\nexport function themeable<T extends {}>(...themes: T[]) {\r\n return themes.reduce(merge, {}) as T;\r\n}\r\n\r\nfunction merge<T extends {[key: string]: string}>(original = {} as T, mixin = {} as T) {\r\n /*\r\n * Make a copy to avoid mutations of nested objects\r\n * also strip all functions injected by isomorphic-style-loader\r\n */\r\n const result = Object.keys(original).reduce(\r\n (acc, key) => {\r\n const value = original[key];\r\n if (typeof value !== \"function\") {\r\n acc[key] = value;\r\n }\r\n return acc;\r\n },\r\n {} as {[key: string]: string}\r\n );\r\n\r\n // Traverse mixin keys and merge them to resulting theme\r\n for (const key in mixin) {\r\n // There's no need to set any defaults here\r\n const originalValue = result[key];\r\n const mixinValue = mixin[key];\r\n\r\n switch (typeof mixinValue) {\r\n case \"undefined\": // Fallthrough - handles accidentally unset values which may come from props\r\n case \"function\":\r\n // This handles issue when isomorphic-style-loader addes helper functions to css-module\r\n break; // Just skip\r\n\r\n default:\r\n // Plain values\r\n switch (typeof originalValue) {\r\n case \"undefined\":\r\n // Mixin key is new to original theme - take it as is\r\n result[key] = mixinValue;\r\n break;\r\n\r\n case \"function\":\r\n // This handles issue when isomorphic-style-loader addes helper functions to css-module\r\n break; // Just skip\r\n\r\n default:\r\n // Finally we can merge\r\n result[key] = [...originalValue.split(\" \"), ...mixinValue.split(\" \")]\r\n .filter((item, pos, self) => self.indexOf(item) === pos && item !== \"\")\r\n .join(\" \");\r\n break;\r\n }\r\n break;\r\n }\r\n }\r\n\r\n return result;\r\n}\r\n","import classNames from \"classnames\";\r\nimport {pick} from \"es-toolkit\";\r\n\r\nimport {BemFunction, CSSElement, CSSMod, CSSToStrings} from \"./common\";\r\n\r\nexport type AllMods<CSS> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never}[keyof CSS];\r\nexport type ToBem<CSS> = Omit<\r\n {\r\n [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E>\r\n ? BemFunction<CSS, P, E>\r\n : CSS[P] extends CSSMod<infer __, infer ___>\r\n ? never\r\n : BemFunction<CSS, P, string>;\r\n },\r\n AllMods<CSS>\r\n>;\r\n\r\nexport type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;\r\n\r\n/**\r\n * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM\r\n * en un objet contenant une fonction par \"élément\" à laquelle on peut appliquer ses \"modificateurs\".\r\n *\r\n * Par exemple, un objet contenant les classes\r\n * ```ts\r\n * [\"panel\", \"panel--editing\", \"panel--loading\", \"title\", \"title--top\", \"title--bottom\"]\r\n * ```\r\n * sera transformé en un objet avec 2 fonctions `panel` et `title` :\r\n * ```ts\r\n * {\r\n * panel({editing?: boolean; loading?: boolean}) => string;\r\n * title({top?: boolean; bottom?: boolean}) => string;\r\n * }\r\n * ```\r\n * Un appel à une fonction retournera la classe CSS de l'\"élément\", à laquelle seront ajoutées ou non les classes des différents \"modificateurs\",\r\n * selon les valeurs des différents booléens.\r\n *\r\n * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.\r\n * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.\r\n *\r\n * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._\r\n *\r\n * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._\r\n */\r\nexport function toBem<CSS>(css: CSS): ToBem<CSS> {\r\n const data: {[key: string]: string[]} = {};\r\n for (const key in css) {\r\n const [element, modifier] = key.split(\"--\");\r\n if (data[element] && modifier) {\r\n data[element].push(modifier);\r\n } else if (!data[element]) {\r\n data[element] = modifier ? [modifier] : [];\r\n }\r\n }\r\n\r\n return Object.keys(data).reduce(\r\n (bem, key) => ({\r\n ...bem,\r\n [key]: (mods: true | {[key: string]: boolean} = {}) => {\r\n if (mods !== true) {\r\n return classNames(\r\n (css as any)[key],\r\n ...data[key].filter(mod => mods[mod]).map(mod => (css as any)[`${key}--${mod}`])\r\n );\r\n } else {\r\n return pick(css as any, [key, ...data[key].map(mod => `${key}--${mod}`)]);\r\n }\r\n }\r\n }),\r\n {}\r\n ) as ToBem<CSS>;\r\n}\r\n\r\n/**\r\n * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet\r\n * qui contient toutes les classes CSS qui le compose.\r\n */\r\nexport function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T> {\r\n const res: CSSToStrings<T> = {};\r\n\r\n for (const key in css as any) {\r\n const value = (css as any)[key];\r\n if (value) {\r\n if (typeof value === \"string\") {\r\n (res as any)[key] = value;\r\n } else {\r\n Object.assign(res, value(true));\r\n }\r\n }\r\n }\r\n\r\n return res;\r\n}\r\n","import {ReactNode, useContext, useMemo} from \"react\";\r\n\r\nimport {CSSContext, ThemeContext} from \"./common\";\r\nimport {themeable} from \"./themeable\";\r\nimport {fromBem} from \"./to-bem\";\r\n\r\n/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */\r\nexport interface FocusCSSContext extends CSSContext {\r\n // Collections\r\n actionBar: {};\r\n advancedSearch: {};\r\n contextualActions: {};\r\n facet: {};\r\n facetBox: {};\r\n group: {};\r\n list: {};\r\n listBase: {};\r\n searchBar: {};\r\n summary: {};\r\n table: {};\r\n timeline: {};\r\n\r\n // Forms\r\n booleanRadio: {};\r\n display: {};\r\n field: {};\r\n form: {};\r\n inputDate: {};\r\n inputFile: {};\r\n label: {};\r\n select: {};\r\n selectCheckbox: {};\r\n selectChips: {};\r\n selectRadio: {};\r\n\r\n // Layout\r\n dialog: {};\r\n filAriane: {};\r\n header: {};\r\n lateralMenu: {};\r\n layout: {};\r\n mainMenu: {};\r\n overlay: {};\r\n panel: {};\r\n popin: {};\r\n scrollable: {};\r\n scrollspy: {};\r\n\r\n // Toolbox\r\n autocomplete: {};\r\n button: {};\r\n calendar: {};\r\n checkbox: {};\r\n chip: {};\r\n dropdown: {};\r\n floatingActionButton: {};\r\n iconButton: {};\r\n menu: {};\r\n progressIndicator: {};\r\n radio: {};\r\n ripple: {};\r\n slider: {};\r\n snackbar: {};\r\n supportingText: {};\r\n switch: {};\r\n textField: {};\r\n tabs: {};\r\n tooltip: {};\r\n}\r\n\r\n/** Props du ThemeProvider. */\r\nexport interface ThemeProviderProps {\r\n /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé. */\r\n appTheme: Partial<FocusCSSContext>;\r\n /** Enfants. */\r\n children: ReactNode;\r\n}\r\n\r\n/**\r\n * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés\r\n * à l'intérieur (via un context React).\r\n *\r\n * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,\r\n * y compris sur les mêmes composants.\r\n */\r\nexport function ThemeProvider({appTheme, children}: ThemeProviderProps) {\r\n const context = useContext(ThemeContext);\r\n\r\n const mergedContext = useMemo(() => {\r\n const mc = {} as CSSContext;\r\n\r\n for (const key in context) {\r\n if (key in appTheme && appTheme[key]) {\r\n mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));\r\n } else {\r\n mc[key] = context[key];\r\n }\r\n }\r\n\r\n for (const key in appTheme) {\r\n if (!(key in context) && appTheme[key]) {\r\n mc[key] = appTheme[key]!;\r\n }\r\n }\r\n return mc;\r\n }, [appTheme, context]);\r\n\r\n return <ThemeContext.Provider value={mergedContext}>{children}</ThemeContext.Provider>;\r\n}\r\n","import {useContext} from \"react\";\r\n\r\nimport {CSSToStrings, ThemeContext} from \"./common\";\r\nimport {themeable} from \"./themeable\";\r\nimport {fromBem, toBem, ToBem} from \"./to-bem\";\r\n\r\n/**\r\n * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS\r\n * passées en paramètre.\r\n *\r\n * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.\r\n *\r\n * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`\r\n * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.\r\n */\r\nexport function useTheme<T>(\r\n name: string,\r\n ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]\r\n): ToBem<T> {\r\n const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\r\n return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x!))) as T);\r\n}\r\n"],"mappings":"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"} |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
11154
-79.76%- Number of package files
4
-55.56%- Lines of code
24
-96.65%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes