@massimo-cassandro/minimo 0.2.4 → 0.3.1

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.2.4",
3
+ "version": "0.3.1",
4
4
  "description": "Light css framework",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -19,8 +19,8 @@
19
19
  "UPD-version": "npx update-version # --config=./dev-utilities.config.mjs",
20
20
  "upd@m": "npx upd@m",
21
21
  "npm-publish": "npm publish",
22
- "build-tokens": "node ./utilities/build-tokens.mjs --config ./test/tokens-test/tokens-config.mjs",
23
- "check unresolved props": "node ./utilities/check-unresolved-custom-props.mjs --config ./test/tokens-test/tokens-config.mjs"
22
+ "build-tokens": "node ./src/design-tokens-utilities/build-tokens.mjs --config ./test/tokens-test/tokens-config.mjs",
23
+ "check unresolved props": "node ./src/design-tokens-utilities/check-unresolved-custom-props.mjs --config ./test/tokens-test/tokens-config.mjs"
24
24
  },
25
25
  "license": "MIT",
26
26
  "author": "Massimo Cassandro",
@@ -0,0 +1,16 @@
1
+ .badge {
2
+ display: inline-block;
3
+ padding: var(--size-xxs) var(--size-sm);
4
+ font-size: var(--badge-font-size);
5
+ font-weight: var(--badge-font-weight);
6
+ vertical-align: middle;
7
+ color: var(--badge-color);
8
+ background-color: var(--badge-background-color);
9
+ border-radius: var(--radius-pill);
10
+
11
+ &.badge-lg {
12
+ font-size: var(--badge-lg-font-size);
13
+ font-weight: var(--badge-lg-font-weight);
14
+
15
+ }
16
+ }
@@ -3,6 +3,12 @@
3
3
  --accent-on-base: #fff;
4
4
  --alert-border-radius: var(--radius-md);
5
5
  --alert-drop-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
6
+ --badge-background-color: var(--primary-base);
7
+ --badge-color: var(--primary-on-base);
8
+ --badge-font-size: var(--font-size-xs);
9
+ --badge-font-weight: var(--font-weight-semibold);
10
+ --badge-lg-font-size: var(--font-size-base);
11
+ --badge-lg-font-weight: var(--badge-font-weight);
6
12
  --body-background-color: #fff;
7
13
  --body-text: var(--text-color);
8
14
  --btn-border-radius: var(--form-control-border-radius);
@@ -153,6 +159,7 @@
153
159
  --link-visited-color: #ae0da3;
154
160
  --neutral-base: #666;
155
161
  --neutral-on-base: #fff;
162
+ --overlay-color: rgb(0 0 0 / .6);
156
163
  --primary-base: #083865;
157
164
  --primary-on-base: #fff;
158
165
  --radius-base: var(--size-base);
@@ -184,7 +191,6 @@
184
191
  --size-xs: .5rem;
185
192
  --size-xxs: .25rem;
186
193
  --spinner-color: var(--primary-base);
187
- --spinner-overlay-color: rgb(0 0 0 / .6);
188
194
  --spinner-size: var(--size-lg);
189
195
  --spinner-stroke-width: .125rem;
190
196
  --status-danger-border-color: var(--status-danger-color);
@@ -0,0 +1,36 @@
1
+ {
2
+ "badge": {
3
+ "background": {
4
+ "color": {
5
+ "$value": "{primary.base}",
6
+ "$type": "color"
7
+ }
8
+ },
9
+ "color": {
10
+ "$value": "{primary.on-base}",
11
+ "$type": "color"
12
+ },
13
+ "font": {
14
+ "size": {
15
+ "$value": "{font.size.xs}",
16
+ "$type": "dimension"
17
+ },
18
+ "weight": {
19
+ "$value": "{font.weight.semibold}",
20
+ "$type": "number"
21
+ }
22
+ },
23
+ "lg": {
24
+ "font": {
25
+ "size": {
26
+ "$value": "{font.size.base}",
27
+ "$type": "dimension"
28
+ },
29
+ "weight": {
30
+ "$value": "{badge.font.weight}",
31
+ "$type": "number"
32
+ }
33
+ }
34
+ }
35
+ } // end badge
36
+ }
@@ -23,6 +23,7 @@
23
23
  @import '@minimo/css/buttons/buttons.css';
24
24
  /* @import '@minimo/css/buttons/status-buttons.css'; */
25
25
  /* @import '@minimo/css/buttons/btn-close.css'; */
26
+ /* @import '@minimo/css/badge.css'; */
26
27
  @import '@minimo/css/text.css';
27
28
  @import '@minimo/css/anchors.css';
28
29
  /* @import '@minimo/css/headings.css'; */