scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/TempDesignSystem/Form/Country/country.module.css
+18 -22
View File
@@ -1,34 +1,34 @@
.container {
--select-border: 2px solid var(--some-black-color, #757575);
--select-radius: 0.4rem;
--select-border: 2px solid var(--UI-Grey-60);
--select-width: min(28rem, 100%);
}
.comboBoxContainer {
background-color: var(--some-white-color, #fff);
background-color: var(--Main-Grey-White);
display: grid;
grid-template-areas: "content";
width: var(--select-width);
}
.input {
background-color: var(--some-white-color, #fff);
background-color: var(--Main-Grey-White);
border: var(--select-border);
border-radius: var(--select-radius);
border-radius: var(--Corner-radius-Small);
grid-area: content;
height: 4rem;
padding: 0.8rem 1.6rem;
height: 40px;
padding: var(--Spacing-x1) var(--Spacing-x2);
width: var(--select-width);
}
.input,
.listBoxItem {
color: var(--some-black-color, #757575);
color: var(--UI-Grey-60);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
letter-spacing: -1.5%;
line-height: 2.4rem;
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var--typography-Body-Regular-letterSpacing;
line-height: var(--typography-Body-Regular-lineHeight);
}
.button {
@@ -39,23 +39,19 @@
height: 100%;
justify-self: flex-end;
padding-left: 0;
padding-right: 1.6rem;
padding-right: var(--Spacing-x2);
}
.popover {
background-color: var(--some-white-color, #fff);
background-color: var(--Main-Grey-White);
border: var(--select-border);
border-radius: var(--select-radius);
border-radius: var(--Corner-radius-Small);
overflow: auto;
padding: 1.6rem 1.6rem 1.6rem 0.8rem;
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
var(--Spacing-x1);
width: var(--select-width);
}
.listBoxItem {
padding: 0 0.8rem;
}
.listBoxItem[data-selected="true"],
.listBoxItem[data-focused="true"] {
background-color: rgba(75, 75, 75, 0.2);
padding: 0 var(--Spacing-x1);
}
components/TempDesignSystem/Form/Date/date.module.css
+1
View File
@@ -1,3 +1,4 @@
/* Leaving, will most likely get deleted */
.container {
--border: 2px solid var(--some-black-color, #757575);
--radius: 0.4rem;
components/TempDesignSystem/Form/ErrorMessage/error.module.css
+5 -5
View File
@@ -1,8 +1,8 @@
.message {
color: var(--some-red-color, #d64242);
color: var(--Scandic-Red-60);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.4rem;
font-weight: 400;
line-height: 2.2rem;
margin: 0.4rem 0 0;
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
line-height: var(--typography-Body-Regular-lineHeight);
margin: var(--Spacing-x-half) 0 0;
}
components/TempDesignSystem/Form/Input/input.module.css
+10 -10
View File
@@ -1,13 +1,13 @@
.input {
border: 0.2rem solid var(--some-black-color, #757575);
border-radius: 0.4rem;
color: var(--some-black-color, #757575);
border: 2px solid var(--UI-Grey-60);
border-radius: var(--Corner-radius-Small);
color: var(--UI-Grey-60);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
height: 4rem;
letter-spacing: -1.5%;
line-height: 2.4rem;
padding: 0.8rem 1.6rem;
width: min(28rem, 100%);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
height: 40px;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
padding: var(--Spacing-x1) var(--Spacing-x2);
width: min(280px, 100%);
}
components/TempDesignSystem/Form/Phone/phone.module.css
+11 -10
View File
@@ -1,25 +1,26 @@
.phone {
--react-international-phone-border-color: var(--some-black-color, #757575);
--react-international-phone-border-radius: 0.4rem;
--react-international-phone-font-size: 1.6rem;
--react-international-phone-height: 4rem;
--react-international-phone-text-color: color:
var(--some-black-color, #757575);
--react-international-phone-border-color: var(--UI-Grey-60);
--react-international-phone-border-radius: var(--Corner-radius-Small);
--react-international-phone-font-size: var(
--typography-Body-Regular-fontSize
);
--react-international-phone-height: 40px;
--react-international-phone-text-color: var(--UI-Grey-60);
}
.phone :global(.react-international-phone-input-container) {
display: grid;
/* r-i-p sets their width dynamically and doesn't respect the width property of its parent */
grid-template-columns: 4.7rem minmax(20.3rem, 1fr);
width: min(28rem, 100%);
grid-template-columns: 470px minmax(203px, 1fr);
width: min(280px, 100%);
}
/* react-international-phone only exposes variables to change border-color */
.phone :global(.react-international-phone-country-selector-button),
.phone :global(.react-international-phone-input) {
border-width: 0.2rem;
border-width: 2px;
}
.phone :global(.react-international-phone-input) {
padding: 0.8rem 1.6rem;
padding: var(--Spacing-x1) var(--Spacing-x2);
}
components/TempDesignSystem/Form/Select/select.module.css
+15 -16
View File
@@ -6,61 +6,60 @@
color: var(--Base-Text-UI-Placeholder);
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: 400;
line-height: 100%;
font-weight: var(--typography-Footnote-Regular-fontWeight);
line-height: var(--typography-Footnote-Regular-lineHeight);
}
.select {
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-Medium);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-Medium);
}
.select[data-focused="true"] {
border: 1px solid var(--UI-Text-Active, #0d1f5f);
border: 1px solid var(--Scandic-Blue-90);
outline: none;
}
.input {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
background-color: var(--Scandic-Opacity-White-100);
border: none;
border-radius: var(--Corner-radius-Medium);
color: var(--Base-Text-UI-High-contrast);
height: 56px;
font-family: var(--ff-fira-sans);
display: flex;
gap: var(--Spacing-x-half);
height: 560px;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: 400;
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: 100%;
line-height: var(--typography-Body-Regular-lineHeight);
outline: none;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
text-align: left;
}
.inputContentWrapper {
align-items: flex-start;
display: flex;
flex-direction: column;
align-items: flex-start;
/*6px in Figma but not available as variable*/
gap: var(--Spacing-x-half);
flex: 1 0 0;
}
.popover {
background-color: var(--some-white-color, #fff);
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Medium);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
font-size: var(--typography-Body-Regular-fontSize);
gap: var(--Spacing-x1);
overflow: auto;
width: 100%;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
}
.listBox {
@@ -80,4 +79,4 @@
.listBoxItem[data-selected="true"] {
font-weight: 500;
}
}