mCSS/dist/css/component.notice.css at 071b00fdb796b2f3a01f2087b9bfb256200873de · minimaldesign/mCSS · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*! mCSS v1.4.0 | MIT | https://mcss.dev */
/*
SETTINGS MEDIA QUERIES

https://github.com/argyleink/open-props/blob/main/src/props.media.css
https://open-props.style/#media-queries

Can't use var() inside media queries 🤦‍♂️
https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
so breakpoints are not in theme.default.tokens.css

xxs: 240px
xs: 360px
sm: 480px
md: 768px
lg: 1024px
xl: 1440px
xxl: 1920px
*/

/* https://github.com/postcss/postcss-mixins */

/* Example */

/* truncate single line of text and adds … */

@layer components {
.notice {
  --bg-color: var(--notice-background-color);
  --bd-color: var(--notice-border-color);
  --svg-color: inherit;
  --code-color: inherit;
  --code-bg-color: inherit;

  padding: var(--notice-spacing);
  border: var(--notice-border-width) solid var(--bd-color);
  border-radius: var(--notice-border-radius);
  color: var(--notice-text-color);
  background-color: var(--bg-color);

  code {
    background-color: var(--code-bg-color);
    color: var(--code-color);
  }

  p:last-of-type {
    /* in case it's inside a .prose context */
    margin-bottom: 0;
  }
}

.notice_title {
  display: flex;

  svg {
    margin-bottom: var(--xs3);
    margin-inline-end: 0.5em;
    color: var(--svg-color);
  }

  strong {
    display: block;
    margin-bottom: var(--xs1);
  }
}

.notice-info {
  color: var(--base-950);
  --bg-color: var(--primary-100);
  --bd-color: var(--primary-300);
  --svg-color: var(--primary-400);
  --code-color: var(--primary-600);
  --code-bg-color: var(--primary-200);
}

.notice-danger {
  color: var(--base-950);
  --bg-color: var(--no-200);
  --bd-color: var(--no-500);
  --svg-color: var(--no-500);
  --code-color: var(--no-500);
  --code-bg-color: var(--no-100);
}

.notice-warning {
  color: var(--base-950);
  --bg-color: var(--maybe-200);
  --bd-color: var(--maybe-500);
  --svg-color: var(--maybe-400);
  --code-color: var(--maybe-500);
  --code-bg-color: var(--maybe-100);
}

.notice-confirm {
  color: var(--base-950);
  --bg-color: var(--yes-100);
  --bd-color: var(--yes-500);
  --svg-color: var(--yes-400);
  --code-color: var(--yes-500);
  --code-bg-color: var(--yes-200);
}

/* Heading-adjacent margin mirrors the prose rhythm in global.prose.css
   (prose can't reach into component classes, so the notice owns this rule) */
@scope (.prose) to (.not-prose) {
  .notice:has(+ :is(h1, h2, h3, h4)) {
    margin-bottom: calc(var(--prose-spacing) * 2);
  }
}

}