stackflow/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts at 091c56306d783e5e90d380f608f23295e02e0429 · daangn/stackflow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import {
  createGlobalTheme,
  createGlobalThemeContract,
} from "@vanilla-extract/css";

const GLOBAL_VARS = {
  backgroundColor: "background-color",
  dimBackgroundColor: "dim-background-color",
  transitionDuration: "transition-duration",
  computedTransitionDuration: "computed-transition-duration",
  appBar: {
    borderColor: "app-bar-border-color",
    borderColorTransitionDuration: "app-bar-border-color-transition-duration",
    borderSize: "app-bar-border-size",
    height: "app-bar-height",
    heightTransitionDuration: "app-bar-height-transition-duration",
    minHeight: "app-bar-min-height",
    iconColor: "app-bar-icon-color",
    iconColorTransitionDuration: "app-bar-icon-color-transition-duration",
    textColor: "app-bar-text-color",
    textColorTransitionDuration: "app-bar-text-color-transition-duration",
    backgroundColor: "app-bar-background-color",
    backgroundColorTransitionDuration:
      "app-bar-background-color-transition-duration",
    overflow: "app-bar-overflow",
    minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top",
  },
  bottomSheet: {
    borderRadius: "bottom-sheet-border-radius",
  },
  modal: {
    borderRadius: "bottom-sheet-border-radius",
  },
};

export const globalVars = createGlobalThemeContract(
  GLOBAL_VARS,
  (value) => `stackflow-plugin-basic-ui-${value}`,
);

export type GlobalVars = typeof GLOBAL_VARS;

const androidValues: GlobalVars = {
  backgroundColor: "#fff",
  dimBackgroundColor: "rgba(0, 0, 0, 0.15)",
  transitionDuration: "0s",
  computedTransitionDuration: "0s",
  appBar: {
    borderColor: "rgba(0, 0, 0, 0.07)",
    borderColorTransitionDuration: "0s",
    borderSize: "1px",
    height: "3.5rem",
    heightTransitionDuration: "0s",
    minHeight: "3.5rem",
    iconColor: "#212124",
    iconColorTransitionDuration: "0s",
    textColor: "#212124",
    textColorTransitionDuration: "0s",
    backgroundColor: "#fff",
    backgroundColorTransitionDuration: "0s",
    overflow: "hidden",
    minSafeAreaInsetTop: "0px",
  },
  bottomSheet: {
    borderRadius: "1rem",
  },
  modal: {
    borderRadius: "1rem",
  },
};

const cupertinoValues: GlobalVars = {
  ...androidValues,
  appBar: {
    ...androidValues.appBar,
    height: "2.75rem",
    minHeight: "2.75rem",
    borderSize: "0.5px",
  },
};

createGlobalTheme(
  ":root[data-stackflow-plugin-basic-ui-theme=cupertino]",
  globalVars,
  cupertinoValues,
);
createGlobalTheme(
  ":root[data-stackflow-plugin-basic-ui-theme=android]",
  globalVars,
  androidValues,
);