@kwiz/fluentui 1.0.74 → 1.0.76

package/src/styles/styles.ts

@@ -1,105 +1,105 @@
-import { GriffelStyle, makeStyles, tokens } from "@fluentui/react-components";
-
-export module mixins {
-    export const main: GriffelStyle = {
-        flexShrink: 1,
-        flexGrow: 1
-    };
-    export const clickable: GriffelStyle = {
-        cursor: "pointer",
-        ['& label']: {
-            cursor: "pointer"
-        }
-    }
-    export const box: GriffelStyle = {
-        padding: tokens.spacingHorizontalM,
-        borderRadius: tokens.borderRadiusMedium,
-        boxShadow: tokens.shadow4,
-        margin: tokens.spacingHorizontalXXS
-    }
-    export const float: GriffelStyle = {
-        ...box,
-        /** make buttons work */
-        position: "relative",
-        /** make buttons work */
-        maxWidth: "33%",
-        /** stop bleeding into page */
-        overflowX: "hidden",
-
-        ['& img']: {
-            maxWidth: "100%"
-        }
-    }
-
-    export const flex: GriffelStyle = {
-        display: 'flex',
-        flexWrap: 'nowrap',
-        rowGap: tokens.spacingVerticalM,
-        columnGap: tokens.spacingVerticalM,
-    }
-
-    export const wrap: GriffelStyle = {
-        flexWrap: "wrap"
-    }
-    export const nogap: GriffelStyle = {
-        rowGap: 0,
-        columnGap: 0
-    }
-    export const ellipsis: GriffelStyle = {
-        whiteSpace: 'nowrap',
-        display: 'block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    }
-
-    // export const box: GriffelStyle = {
-    // }
-}
-
-export const KnownClassNames = {
-    print: 'print-root',
-    printHide: 'print-hide',
-    printShow: 'print-show',
-    section: 'kfui-section',
-    vertical: 'kfui-vertical',
-    horizontal: 'kfui-horizontal',
-    list: 'kfui-list',
-    accordion: 'kfui-accordion',
-    accordionHeader: 'kfui-accordion-header',
-    accordionBody: 'kfui-accordion-body',
-    accordionBodyWrapper: 'kfui-accordion-body-wrapper',
-    isOpen: 'is-opened',
-    progressBarStepLabel: 'step-label',
-    left: 'float-left',
-    right: 'float-right'
-}
-export const useCommonStyles = makeStyles({
-    hintLabel: {
-        color: tokens.colorNeutralForeground3,
-        fontSize: tokens.fontSizeBase200,
-        fontWeight: tokens.fontWeightRegular,
-        lineHeight: tokens.lineHeightBase200
-    },
-    validationLabel: {
-        color: tokens.colorPaletteRedForeground1,
-        fontSize: tokens.fontSizeBase200,
-        fontWeight: tokens.fontWeightRegular,
-        lineHeight: tokens.lineHeightBase200
-    },
-    fullscreen: {
-        position: "fixed",
-        top: 0, bottom: 0, left: 0, right: 0,
-        zIndex: 1,
-        backgroundColor: tokens.colorNeutralBackground1,
-        overflow: "auto",
-        padding: tokens.spacingHorizontalL,
-        paddingLeft: "20px",
-        paddingRight: "20px"
-    }
-});
-
-export const commonSizes = {
-    widthMedium: 360,
-    widthWide: 520,
-    extraWidthWide: 820,
+import { GriffelStyle, makeStyles, tokens } from "@fluentui/react-components";
+
+export module mixins {
+    export const main: GriffelStyle = {
+        flexShrink: 1,
+        flexGrow: 1
+    };
+    export const clickable: GriffelStyle = {
+        cursor: "pointer",
+        ['& label']: {
+            cursor: "pointer"
+        }
+    }
+    export const box: GriffelStyle = {
+        padding: tokens.spacingHorizontalM,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow4,
+        margin: tokens.spacingHorizontalXXS
+    }
+    export const float: GriffelStyle = {
+        ...box,
+        /** make buttons work */
+        position: "relative",
+        /** make buttons work */
+        maxWidth: "33%",
+        /** stop bleeding into page */
+        overflowX: "hidden",
+
+        ['& img']: {
+            maxWidth: "100%"
+        }
+    }
+
+    export const flex: GriffelStyle = {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        rowGap: tokens.spacingVerticalM,
+        columnGap: tokens.spacingVerticalM,
+    }
+
+    export const wrap: GriffelStyle = {
+        flexWrap: "wrap"
+    }
+    export const nogap: GriffelStyle = {
+        rowGap: 0,
+        columnGap: 0
+    }
+    export const ellipsis: GriffelStyle = {
+        whiteSpace: 'nowrap',
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }
+
+    // export const box: GriffelStyle = {
+    // }
+}
+
+export const KnownClassNames = {
+    print: 'print-root',
+    printHide: 'print-hide',
+    printShow: 'print-show',
+    section: 'kfui-section',
+    vertical: 'kfui-vertical',
+    horizontal: 'kfui-horizontal',
+    list: 'kfui-list',
+    accordion: 'kfui-accordion',
+    accordionHeader: 'kfui-accordion-header',
+    accordionBody: 'kfui-accordion-body',
+    accordionBodyWrapper: 'kfui-accordion-body-wrapper',
+    isOpen: 'is-opened',
+    progressBarStepLabel: 'step-label',
+    left: 'float-left',
+    right: 'float-right'
+}
+export const useCommonStyles = makeStyles({
+    hintLabel: {
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: tokens.lineHeightBase200
+    },
+    validationLabel: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: tokens.lineHeightBase200
+    },
+    fullscreen: {
+        position: "fixed",
+        top: 0, bottom: 0, left: 0, right: 0,
+        zIndex: 1,
+        backgroundColor: tokens.colorNeutralBackground1,
+        overflow: "auto",
+        padding: tokens.spacingHorizontalL,
+        paddingLeft: "20px",
+        paddingRight: "20px"
+    }
+});
+
+export const commonSizes = {
+    widthMedium: 360,
+    widthWide: 520,
+    extraWidthWide: 820,
 }

package/src/styles/theme.ts

@@ -1,91 +1,91 @@
-import { BrandVariants, Theme, createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
-
-export interface iThemeContext {
-    teams?: boolean;
-    dark?: boolean;
-}
-
-export function getTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    return ctx.dark
-        ? getDarkTheme(ctx, t)
-        : getLightTheme(ctx, t);
-}
-
-
-const kThemeDefault: BrandVariants = {
-    10: "#04010A",
-    20: "#16103B",
-    30: "#17176F",
-    40: "#0F1D9A",
-    50: "#2F2AA1",
-    60: "#4338A8",
-    70: "#5546AF",
-    80: "#6555B6",
-    90: "#7563BD",
-    100: "#8472C4",
-    110: "#9282CB",
-    120: "#A191D2",
-    130: "#AFA1D9",
-    140: "#BDB1E0",
-    150: "#CBC1E7",
-    160: "#D9D2EE"
-};
-
-const kThemeOrange: BrandVariants = {
-    10: "#040301",
-    20: "#1E170A",
-    30: "#312610",
-    40: "#403112",
-    50: "#503D14",
-    60: "#604915",
-    70: "#705516",
-    80: "#816216",
-    90: "#926E16",
-    100: "#A37B15",
-    110: "#B58914",
-    120: "#C79612",
-    130: "#DAA40E",
-    140: "#EDB208",
-    150: "#FFC001",
-    160: "#FFD47F"
-};
-
-const kThemeSecondary: BrandVariants = {
-    10: "#020304",
-    20: "#101A1D",
-    30: "#162B32",
-    40: "#1A3742",
-    50: "#1D4552",
-    60: "#1F5363",
-    70: "#216175",
-    80: "#227087",
-    90: "#227F9A",
-    100: "#208EAD",
-    110: "#1E9EC0",
-    120: "#1AADD4",
-    130: "#12BEE8",
-    140: "#02CEFD",
-    150: "#6BDAFF",
-    160: "#A0E5FF"
-};
-
-function getLightTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    if (ctx.teams) return teamsLightTheme;
-    //return jsonClone(webLightTheme);
-    const lightTheme: Theme = {
-        ...createLightTheme(t),
-    };
-    return lightTheme;
-}
-
-function getDarkTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    if (ctx.teams) return teamsDarkTheme;
-    //return jsonClone(webDarkTheme);
-    const darkTheme: Theme = {
-        ...createDarkTheme(t),
-    };
-
-    darkTheme.colorBrandForeground1 = t[110];
-    darkTheme.colorBrandForeground2 = t[120];
-    return darkTheme;
+import { BrandVariants, Theme, createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
+
+export interface iThemeContext {
+    teams?: boolean;
+    dark?: boolean;
+}
+
+export function getTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
+    return ctx.dark
+        ? getDarkTheme(ctx, t)
+        : getLightTheme(ctx, t);
+}
+
+
+const kThemeDefault: BrandVariants = {
+    10: "#04010A",
+    20: "#16103B",
+    30: "#17176F",
+    40: "#0F1D9A",
+    50: "#2F2AA1",
+    60: "#4338A8",
+    70: "#5546AF",
+    80: "#6555B6",
+    90: "#7563BD",
+    100: "#8472C4",
+    110: "#9282CB",
+    120: "#A191D2",
+    130: "#AFA1D9",
+    140: "#BDB1E0",
+    150: "#CBC1E7",
+    160: "#D9D2EE"
+};
+
+const kThemeOrange: BrandVariants = {
+    10: "#040301",
+    20: "#1E170A",
+    30: "#312610",
+    40: "#403112",
+    50: "#503D14",
+    60: "#604915",
+    70: "#705516",
+    80: "#816216",
+    90: "#926E16",
+    100: "#A37B15",
+    110: "#B58914",
+    120: "#C79612",
+    130: "#DAA40E",
+    140: "#EDB208",
+    150: "#FFC001",
+    160: "#FFD47F"
+};
+
+const kThemeSecondary: BrandVariants = {
+    10: "#020304",
+    20: "#101A1D",
+    30: "#162B32",
+    40: "#1A3742",
+    50: "#1D4552",
+    60: "#1F5363",
+    70: "#216175",
+    80: "#227087",
+    90: "#227F9A",
+    100: "#208EAD",
+    110: "#1E9EC0",
+    120: "#1AADD4",
+    130: "#12BEE8",
+    140: "#02CEFD",
+    150: "#6BDAFF",
+    160: "#A0E5FF"
+};
+
+function getLightTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
+    if (ctx.teams) return teamsLightTheme;
+    //return jsonClone(webLightTheme);
+    const lightTheme: Theme = {
+        ...createLightTheme(t),
+    };
+    return lightTheme;
+}
+
+function getDarkTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
+    if (ctx.teams) return teamsDarkTheme;
+    //return jsonClone(webDarkTheme);
+    const darkTheme: Theme = {
+        ...createDarkTheme(t),
+    };
+
+    darkTheme.colorBrandForeground1 = t[110];
+    darkTheme.colorBrandForeground2 = t[120];
+    return darkTheme;
 }