@microphi/styles 1.2.2 → 1.2.4

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +2 -2
  3. package/scss/_fx-flex.scss +18 -18
  4. package/scss/_mixins.scss +19 -0
  5. package/scss/_sizing.scss +20 -0
  6. package/scss/_typography.scss +8 -8
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.4](https://example.com/compare/@microphi/styles@1.2.3...@microphi/styles@1.2.4) (2025-09-21)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **styles:** add more sizing options ([e944403](https://example.com/commits/e944403c47ec1d5e1f0625f6ffa638d86d191e85))
11
+
12
+ ## [1.2.3](https://example.com/compare/@microphi/styles@1.2.2...@microphi/styles@1.2.3) (2025-06-30)
13
+
14
+ ### Bug Fixes
15
+
16
+ * **styles:** add more sizing options ([11c5de2](https://example.com/commits/11c5de2cd29088e3f69ed89e2c3ce1ea0fce3782))
17
+
6
18
  ## [1.2.2](https://example.com/compare/@microphi/styles@1.2.1...@microphi/styles@1.2.2) (2025-06-29)
7
19
 
8
20
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microphi/styles",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "description": "helper styles",
5
5
  "scripts": {},
6
6
  "private": false,
@@ -22,5 +22,5 @@
22
22
  "peerDependencies": {
23
23
  "utopia-core-scss": "^1.2.0"
24
24
  },
25
- "gitHead": "5bec154ca2ba8b8015b85c15b01abf69e4084513"
25
+ "gitHead": "f3997610d60472c881dce7b905adcfe9edea2ef7"
26
26
  }
package/scss/_fx-flex.scss CHANGED
@@ -29,65 +29,65 @@
29
29
 
30
30
  .#{$actual-prefix}fx-flex-column {
31
31
  display: flex;
32
- flex-direction: column;
32
+ flex-direction: column !important;
33
33
  }
34
34
 
35
35
  .#{$actual-prefix}fx-flex-row {
36
36
  display: flex;
37
- flex-direction: row;
37
+ flex-direction: row !important;
38
38
  }
39
39
 
40
40
  .#{$actual-prefix}fx-flex-nowrap {
41
- flex-wrap: nowrap;
41
+ flex-wrap: nowrap !important;
42
42
  }
43
43
 
44
44
  .#{$actual-prefix}fx-flex-wrap {
45
- flex-wrap: wrap;
45
+ flex-wrap: wrap !important;
46
46
  }
47
47
 
48
48
  .#{$actual-prefix}fx-flex-align-items-center {
49
- align-items: center;
49
+ align-items: center !important;
50
50
  }
51
51
 
52
52
  .#{$actual-prefix}fx-flex-align-items-baseline {
53
- align-items: baseline;
53
+ align-items: baseline !important;
54
54
  }
55
55
 
56
56
  .#{$actual-prefix}fx-flex-justify-center {
57
- justify-content: center;
57
+ justify-content: center !important;
58
58
  }
59
59
 
60
60
  .#{$actual-prefix}fx-flex-align-items-start {
61
- align-items: flex-start;
61
+ align-items: flex-start !important;
62
62
  }
63
63
 
64
64
  .#{$actual-prefix}fx-flex-align-items-end {
65
- align-items: flex-end;
65
+ align-items: flex-end !important;
66
66
  }
67
67
 
68
68
  .#{$actual-prefix}fx-flex-align-items-baseline {
69
- align-items: baseline;
69
+ align-items: baseline !important;
70
70
  }
71
71
 
72
72
  .#{$actual-prefix}fx-flex-align-center-center {
73
- align-items: center;
74
- justify-content: center;
73
+ align-items: center !important;
74
+ justify-content: center !important;
75
75
  }
76
76
 
77
77
  .#{$actual-prefix}fx-flex-justify-space-evenly {
78
- justify-content: space-around;
78
+ justify-content: space-around !important;
79
79
  }
80
80
 
81
81
  .#{$actual-prefix}fx-flex-justify-space-around {
82
- justify-content: space-around;
82
+ justify-content: space-around !important;
83
83
  }
84
84
 
85
85
  .#{$actual-prefix}fx-flex-justify-space-between {
86
- justify-content: space-between;
86
+ justify-content: space-between !important;
87
87
  }
88
88
 
89
89
  .#{$actual-prefix}fx-flex-justify-end {
90
- justify-content: end;
90
+ justify-content: end !important;
91
91
  }
92
92
 
93
93
 
@@ -95,11 +95,11 @@
95
95
  @while $i <= 100 {
96
96
 
97
97
  .#{$actual-prefix}fx-w-#{$i} {
98
- width: #{$i}vw;
98
+ width: #{$i}vw !important;
99
99
  }
100
100
 
101
101
  .#{$actual-prefix}fx-h-#{$i} {
102
- height: #{$i}vh;
102
+ height: #{$i}vh !important;
103
103
  }
104
104
 
105
105
 
package/scss/_mixins.scss CHANGED
@@ -44,4 +44,23 @@
44
44
  }
45
45
  }
46
46
  }
47
+
48
+ @media (max-aspect-ratio: 4/4) {
49
+ .taller\:#{$selector} {
50
+ @content;
51
+ }
52
+ }
53
+
54
+ @media (min-aspect-ratio: 4/4) {
55
+ .wider\:#{$selector} {
56
+ @content;
57
+ }
58
+ }
59
+
60
+ @media (min-aspect-ratio: 8/4) {
61
+ .wider\:#{$selector} {
62
+ @content;
63
+ }
64
+ }
65
+
47
66
  }
package/scss/_sizing.scss CHANGED
@@ -6,9 +6,19 @@ $sizing-map: (
6
6
  shortcut: w,
7
7
  values: (
8
8
  0: 0,
9
+ 10: 10%,
10
+ 20: 20%,
9
11
  25: 25%,
12
+ 30: 30%,
13
+ 33: 33%,
14
+ 40: 40%,
10
15
  50: 50%,
16
+ 60: 60%,
17
+ 67: 67%,
18
+ 70: 70%,
11
19
  75: 75%,
20
+ 80: 80%,
21
+ 90: 90%,
12
22
  full: 100%,
13
23
  auto: auto
14
24
  )
@@ -34,9 +44,19 @@ $sizing-map: (
34
44
  shortcut: h,
35
45
  values: (
36
46
  0: 0,
47
+ 10: 10%,
48
+ 20: 20%,
37
49
  25: 25%,
50
+ 30: 30%,
51
+ 33: 33%,
52
+ 40: 40%,
38
53
  50: 50%,
54
+ 60: 60%,
55
+ 67: 67%,
56
+ 70: 70%,
39
57
  75: 75%,
58
+ 80: 80%,
59
+ 90: 90%,
40
60
  full: 100%,
41
61
  auto: auto
42
62
  )
package/scss/_typography.scss CHANGED
@@ -58,43 +58,43 @@ $font-weight-map: (
58
58
  }
59
59
 
60
60
  .fx-headline-5 {
61
- font-size: var(--fx-typography-3);
61
+ font-size: var(--fx-typography-2);
62
62
  font-weight: map.get($font-weight-map, font-normal);
63
63
  line-height: initial;
64
64
  }
65
65
 
66
66
  .fx-title {
67
- font-size: var(--fx-typography-2);
67
+ font-size: var(--fx-typography-1);
68
68
  font-weight: map.get($font-weight-map, font-medium);
69
69
  line-height: 1.6rem;
70
70
  }
71
71
 
72
72
  .fx-subtitle {
73
- font-size: var(--fx-typography-1);
73
+ font-size: var(--fx-typography-0);
74
74
  font-weight: map.get($font-weight-map, font-normal);
75
75
  line-height: 1.6rem;
76
76
  }
77
77
 
78
78
  .fx-body-1 {
79
- font-size: var(--fx-typography-0);
79
+ font-size: var(--fx-typography--1);
80
80
  font-weight: map.get($font-weight-map, font-normal);
81
81
  line-height: 1.5rem;
82
82
  }
83
83
 
84
84
  .fx-body-2 {
85
- font-size: var(--fx-typography--1);
85
+ font-size: var(--fx-typography--2);
86
86
  font-weight: map.get($font-weight-map, font-light);
87
- line-height: var(--fx-typography-1);
87
+ line-height: var(--fx-typography--2);
88
88
  }
89
89
 
90
90
  .fx-caption {
91
- font-size: var(--fx-typography--2);
91
+ font-size: var(--fx-typography--3);
92
92
  font-weight: map.get($font-weight-map, font-normal);
93
93
  line-height: initial;
94
94
  }
95
95
 
96
96
  .fx-overline {
97
- font-size: var(--fx-typography--3);
97
+ font-size: var(--fx-typography--4);
98
98
  font-weight: map.get($font-weight-map, font-light);
99
99
  line-height: initial;
100
100
  }