@goodhood-web/ui 1.1.0-development.5 → 1.1.0-development.6
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/index.js +11 -11
- package/index.mjs +268 -268
- package/package.json +3 -2
- package/style.css +1 -1
- package/styles/_design-tokens.scss +1 -0
- package/styles/_fonts.scss +0 -0
- package/styles/_functions.scss +25 -0
- package/styles/_mixins.scss +34 -0
- package/styles/index.scss +3 -0
- package/styles/reset.scss +67 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@goodhood-web/ui",
|
|
3
|
-
"version": "1.1.0-development.
|
|
3
|
+
"version": "1.1.0-development.6",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"private": false,
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@mui/base": "^5.0.0-beta.27"
|
|
18
|
+
"@mui/base": "^5.0.0-beta.27",
|
|
19
|
+
"@goodhood/design-tokens": "dev"
|
|
19
20
|
}
|
|
20
21
|
}
|
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._baseBtn_sadyt_9{min-width:2rem;min-height:2rem;border:none;border-radius:0;cursor:pointer}._baseBtn--active_sadyt_16{background:#b1b1b1}._root_1bveu_9{display:flex;overflow:hidden;width:100%;flex-direction:column;padding:16px;background-color:#fff;box-shadow:0 2px 8px #0000001a;color:#201649}._root--border-radius_1bveu_19{border-radius:8px}._root_19l77_9{padding:8px 0;color:inherit}._iconComponent_10k1r_9{display:block}._iconComponent_10k1r_9 path{stroke:currentColor}._iconButton_mrpxf_9{display:flex;width:auto;min-width:unset;height:auto;min-height:unset;flex-shrink:0;align-items:center;justify-content:center;color:#201649}._iconButton_mrpxf_9:disabled{background:none}._iconButton_mrpxf_9:hover,._iconButton_mrpxf_9:active{background:none}._iconButton--circular_mrpxf_29{border-radius:50%;background:#cae85d}._iconButton--circular_mrpxf_29:disabled{background:#ffffff}._iconButton--circular_mrpxf_29:hover{background:#b5d622}._iconButton--circular_mrpxf_29:active{background:#cae85d}._iconButton--circular-small_mrpxf_42{width:40px;height:40px}._iconButton--circular-medium_mrpxf_46{width:48px;height:48px}._iconButton--circular-large_mrpxf_50{width:56px;height:56px}._root_10lxp_9{display:flex;align-items:center;padding-bottom:12px;color:inherit;gap:8px}._title_10lxp_17{flex-grow:1;margin:0}._h1_1bi97_9{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:32px;font-weight:500;letter-spacing:0;line-height:40px;text-decoration:none;text-indent:0px;text-transform:none}._h2_1bi97_21{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:24px;font-weight:Semi Bold;letter-spacing:0;line-height:32px;text-decoration:none;text-indent:0px;text-transform:none}._h3_1bi97_33{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:20px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h4_1bi97_45{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h5_1bi97_57{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h6_1bi97_69{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:1;line-height:24px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h7_1bi97_81{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:Extra Bold;letter-spacing:1;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h8_1bi97_93{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:1.5;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._body-large_1bi97_105{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._body-regular_1bi97_117{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._body-semibold_1bi97_129{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Semi Bold;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._body-italic_1bi97_141{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Italic;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._detail-medium_1bi97_153{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-bold_1bi97_165{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-upper-case_1bi97_177{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._ccBtn_1lqve_9{display:flex;width:100%;height:40px;align-items:center;align-self:stretch;padding:8px 16px;border-color:transparent;border-radius:12px;background-color:#f4f3f6;color:#201649;cursor:pointer;font-size:14px}._dividerContainer_12tzl_9{display:flex;align-items:center}._dividerLine_12tzl_14{height:1px;flex-grow:1;background-color:#d2d0db}._fieldset_1bk9b_9{border:none}._labelPill_3esmw_9{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:#01819C}._labelPill_3esmw_9 span{color:#fff;line-height:16px;text-align:center}._labelPill--small_3esmw_21{height:20px;padding:0 8px}._labelPill--small_3esmw_21 span{font-size:10px;font-weight:800;text-transform:uppercase}._labelPill--medium_3esmw_30{padding:4px 8px}._labelPill--medium_3esmw_30 span{font-size:12px;font-weight:700}._legend_k3se6_9{display:flex;flex-direction:column;padding-bottom:12px;gap:8px}._legend_k3se6_9 ._text_k3se6_15{color:#635c80}._menuItem_16y2m_9{display:flex;width:100%;flex-shrink:0;align-items:center;padding:0 8px;background-color:#fff;color:#635c80;cursor:pointer;gap:8px;text-decoration:none}._menuItem_16y2m_9 ._highlightFrame_16y2m_21{display:flex;flex:1;align-items:center;padding:8px;border-radius:8px;gap:8px}._menuItem_16y2m_9 ._rightIcon_16y2m_29{display:inherit;margin-left:auto}._menuItem_16y2m_9 ._rightIcon_16y2m_29 svg path{stroke:#635c80!important}._menuItem--selected_16y2m_36{color:#201649}._menuItem--selected_16y2m_36 ._highlightFrame_16y2m_21{background-color:#f2fbc4}._menuItem--selected_16y2m_36 ._highlightFrame_16y2m_21 svg path{stroke:#738c00}._menuItem--selected_16y2m_36:hover{color:#738c00}._menuItem_16y2m_9:not(._menuItem--selected_16y2m_36):hover{color:#635c80}._menuItem_16y2m_9:not(._menuItem--selected_16y2m_36):hover svg path{stroke:#635c80}._menuItem_16y2m_9:not(._menuItem--selected_16y2m_36):hover ._highlightFrame_16y2m_21{background-color:#f4f3f6}._bubbleContent_1frdd_9{position:relative;display:inline-block}._bubble_1frdd_9{position:absolute;z-index:auto;top:6px;right:6px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background-color:#ff9de2;color:#201649;font-size:12px;font-weight:700;text-align:center;transform:translate(50%,-50%);transform-origin:100% 0;white-space:nowrap}._bubble--empty_1frdd_34{width:12px;height:12px}._root_slyzs_16{position:relative;overflow:hidden;flex-shrink:0;border:solid 1px #d2d0db;background-color:#d2d0db}._root--24_slyzs_23{width:24px;height:24px}._root--28_slyzs_27{width:28px;height:28px}._root--32_slyzs_31{width:32px;height:32px}._root--40_slyzs_35{width:40px;height:40px}._root--48_slyzs_39{width:48px;height:48px}._root--56_slyzs_43{width:56px;height:56px}._root--64_slyzs_47{width:64px;height:64px}._root--80_slyzs_51{width:80px;height:80px}._root--120_slyzs_55{width:120px;height:120px}._root--280_slyzs_59{width:280px;height:280px}._root--square_slyzs_63._root--24_slyzs_23,._root--square_slyzs_63._root--32_slyzs_31{border-radius:4px}._root--square_slyzs_63._root--40_slyzs_35,._root--square_slyzs_63._root--48_slyzs_39{border-radius:8px}._root--square_slyzs_63._root--56_slyzs_43,._root--square_slyzs_63._root--64_slyzs_47{border-radius:12px}._root--square_slyzs_63._root--80_slyzs_51,._root--square_slyzs_63._root--120_slyzs_55{border-radius:16px}._root--circular_slyzs_75{border-radius:50%}._root--isPlaceholder_slyzs_78:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#d2d0db;content:"";opacity:.4}._root_slyzs_16 img{width:100%;height:100%;object-fit:cover}._switch_18m5u_9{position:relative;display:inline-block;width:48px;height:28px}._switch_18m5u_9 input{position:absolute;z-index:2;width:48px;height:28px;cursor:pointer;opacity:0}._switch_18m5u_9 ._slider_18m5u_23{z-index:1;display:block;width:100%;height:100%;border-radius:34px;background-color:#e9e8ed;box-shadow:0 1px 3px #0003 inset;cursor:pointer;transition:.4s}._switch_18m5u_9 ._slider_18m5u_23:before{position:absolute;right:3px;bottom:2px;width:24px;height:24px;border-radius:50%;background-color:#fff;box-shadow:0 0 2px #0003;content:"";transform:translate(-18px);transition:.4s}._switch_18m5u_9 ._slider_18m5u_23._focusVisible_18m5u_47{box-shadow:0 0 0 3px #cae85d}._switch_18m5u_9 input:checked+._slider_18m5u_23{background-color:#b5d622}._switch_18m5u_9 input:checked+._slider_18m5u_23:before{transform:translate(0)}._toggleInput_1kwf8_9{display:flex;width:100%;align-items:center;padding:8px 16px;background-color:#fff;color:#635c80;cursor:pointer;gap:12px}._toggleInput_1kwf8_9 svg{flex-shrink:0}._toggleInput_1kwf8_9 ._textLabel_1kwf8_22{flex-grow:1}._toggleInput_1kwf8_9 ._switch_1kwf8_25{flex-shrink:0}._toggleInput--checked_1kwf8_28{color:#201649}._toggleInput--withBorder_1kwf8_31{padding:12px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px #d2d0db}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward '@goodhood/design-tokens/lib/web/index';
|
|
File without changes
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
|
|
3
|
+
@forward 'design-tokens';
|
|
4
|
+
|
|
5
|
+
@function mapGet($map, $keys...) {
|
|
6
|
+
$value: map.get($map, $keys...);
|
|
7
|
+
|
|
8
|
+
@if not $value {
|
|
9
|
+
@error "Value not found for keys: #{$keys}";
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@return $value;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@function getSemanticColor($color, $shade) {
|
|
16
|
+
@return mapGet($tokens, color, semantic, $color, $shade);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@function getSpacing($spacingType) {
|
|
20
|
+
@return mapGet($tokens, spacing, $spacingType);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@function getBorderRadius($spacingType) {
|
|
24
|
+
@return mapGet($tokens, borderRadius, $spacingType);
|
|
25
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
|
|
3
|
+
@mixin spacing($properties, $map: map.get($tokens, 'spacing')) {
|
|
4
|
+
// Extract the correct spacing settings;
|
|
5
|
+
@each $size, $i in $map {
|
|
6
|
+
$value: map.get($tokens, 'spacing', $size);
|
|
7
|
+
&-#{$size} {
|
|
8
|
+
@each $property in $properties {
|
|
9
|
+
#{$property}: #{$value};
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin typography($type, $level) {
|
|
16
|
+
// Extract the correct typography settings based on the provided type and level
|
|
17
|
+
$typo-settings: map.get(map.get($tokens, $type), $level);
|
|
18
|
+
|
|
19
|
+
// Ensure the level exists
|
|
20
|
+
@if $typo-settings {
|
|
21
|
+
margin-bottom: mapGet($typo-settings, 'paragraphSpacing');
|
|
22
|
+
font-family: mapGet($typo-settings, 'fontFamily'), 'Helvetica Neue', 'Arial',
|
|
23
|
+
sans-serif;
|
|
24
|
+
font-size: mapGet($typo-settings, 'fontSize');
|
|
25
|
+
font-weight: mapGet($typo-settings, 'fontWeight');
|
|
26
|
+
letter-spacing: mapGet($typo-settings, 'letterSpacing');
|
|
27
|
+
line-height: mapGet($typo-settings, 'lineHeight');
|
|
28
|
+
text-decoration: mapGet($typo-settings, 'textDecoration');
|
|
29
|
+
text-indent: mapGet($typo-settings, 'paragraphIndent');
|
|
30
|
+
text-transform: mapGet($typo-settings, 'textCase');
|
|
31
|
+
} @else {
|
|
32
|
+
@error "Unknown typography type: #{$type} or level: #{$level}.";
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
*,
|
|
2
|
+
:after,
|
|
3
|
+
:before {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
padding: 0;
|
|
6
|
+
margin: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
[hidden] {
|
|
10
|
+
display: none !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
input {
|
|
14
|
+
border: none;
|
|
15
|
+
appearance: none;
|
|
16
|
+
|
|
17
|
+
&[type='search'] {
|
|
18
|
+
appearance: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[type='file']::-webkit-file-upload-button {
|
|
22
|
+
display: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&[type='number'] {
|
|
26
|
+
appearance: textfield;
|
|
27
|
+
|
|
28
|
+
&::-webkit-inner-spin-button,
|
|
29
|
+
&::-webkit-outer-spin-button {
|
|
30
|
+
appearance: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
select {
|
|
36
|
+
border: none;
|
|
37
|
+
appearance: none;
|
|
38
|
+
background-color: transparent;
|
|
39
|
+
|
|
40
|
+
&::-ms-expand {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
textarea {
|
|
46
|
+
border: none;
|
|
47
|
+
appearance: none;
|
|
48
|
+
-ms-overflow-style: none;
|
|
49
|
+
resize: vertical;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
button {
|
|
53
|
+
border: none;
|
|
54
|
+
background-color: transparent;
|
|
55
|
+
text-align: left;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ul,
|
|
59
|
+
ol {
|
|
60
|
+
list-style-type: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
img,
|
|
64
|
+
svg {
|
|
65
|
+
display: block;
|
|
66
|
+
max-width: 100%;
|
|
67
|
+
}
|