💄(frontend) add cunningham tokens
In order to use the spaces and grays of the DSFR, we update the cunningham.ts file
This commit is contained in:
Nathan Panchout
committed by
Anthony LC
Anthony LC
parent
945f55f50d
commit
e83c404e21
@@ -8,6 +8,8 @@ const config = {
|
||||
'primary-100': '#EDF5FA',
|
||||
'primary-150': '#E5EEFA',
|
||||
'info-150': '#E5EEFA',
|
||||
'greyscale-000': '#fff',
|
||||
'greyscale-1000': '#161616',
|
||||
},
|
||||
font: {
|
||||
sizes: {
|
||||
@@ -34,6 +36,21 @@ const config = {
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
'4xs': '0.125rem',
|
||||
'3xs': '0.25rem',
|
||||
'2xs': '0.375rem',
|
||||
xs: '0.5rem',
|
||||
sm: '0.75rem',
|
||||
base: '1rem',
|
||||
md: '1.5rem',
|
||||
lg: '2rem',
|
||||
xl: '2.5rem',
|
||||
xxl: '3rem',
|
||||
xxxl: '3.5rem',
|
||||
'4xl': '4rem',
|
||||
'5xl': '4.5rem',
|
||||
'6xl': '6rem',
|
||||
'7xl': '7.5rem',
|
||||
},
|
||||
breakpoints: {
|
||||
xxs: '320px',
|
||||
@@ -104,7 +121,7 @@ const config = {
|
||||
focus: 'var(--c--components--forms-select--border-radius)',
|
||||
},
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
'menu-background-color': '#ffffff',
|
||||
'menu-background-color': '#fff',
|
||||
'item-background-color': {
|
||||
hover: 'var(--c--theme--colors--primary-300)',
|
||||
},
|
||||
@@ -126,7 +143,7 @@ const config = {
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
'background-color': '#ffffff',
|
||||
'background-color': '#fff',
|
||||
},
|
||||
button: {
|
||||
'border-radius': {
|
||||
@@ -209,7 +226,7 @@ const config = {
|
||||
'primary-700': '#272747',
|
||||
'primary-800': '#21213f',
|
||||
'primary-900': '#1c1a36',
|
||||
'secondary-text': '#FFFFFF',
|
||||
'secondary-text': '#fff',
|
||||
'secondary-100': '#fee9ea',
|
||||
'secondary-200': '#fedfdf',
|
||||
'secondary-300': '#fdbfbf',
|
||||
@@ -220,16 +237,22 @@ const config = {
|
||||
'secondary-800': '#341f1f',
|
||||
'secondary-900': '#2b1919',
|
||||
'greyscale-text': '#303C4B',
|
||||
'greyscale-000': '#f6f6f6',
|
||||
'greyscale-100': '#eeeeee',
|
||||
'greyscale-200': '#e5e5e5',
|
||||
'greyscale-300': '#e1e1e1',
|
||||
'greyscale-400': '#dddddd',
|
||||
'greyscale-500': '#cecece',
|
||||
'greyscale-600': '#7b7b7b',
|
||||
'greyscale-700': '#666666',
|
||||
'greyscale-800': '#2a2a2a',
|
||||
'greyscale-900': '#1e1e1e',
|
||||
'greyscale-000': '#fff',
|
||||
'greyscale-050': '#F6F6F6',
|
||||
'greyscale-100': '#eee',
|
||||
'greyscale-200': '#E5E5E5',
|
||||
'greyscale-250': '#ddd',
|
||||
'greyscale-300': '#CECECE',
|
||||
'greyscale-350': '#ddd',
|
||||
'greyscale-400': '#929292',
|
||||
'greyscale-500': '#7C7C7C',
|
||||
'greyscale-600': '#666666',
|
||||
'greyscale-700': '#3A3A3A',
|
||||
'greyscale-750': '#353535',
|
||||
'greyscale-800': '#2A2A2A',
|
||||
'greyscale-900': '#242424',
|
||||
'greyscale-950': '#1E1E1E',
|
||||
'greyscale-1000': '#161616',
|
||||
'success-text': '#1f8d49',
|
||||
'success-100': '#dffee6',
|
||||
'success-200': '#b8fec9',
|
||||
@@ -297,9 +320,9 @@ const config = {
|
||||
'color-hover': '#1212ff',
|
||||
'color-active': '#2323ff',
|
||||
},
|
||||
color: '#ffffff',
|
||||
'color-hover': '#ffffff',
|
||||
'color-active': '#ffffff',
|
||||
color: '#fff',
|
||||
'color-hover': '#fff',
|
||||
'color-active': '#fff',
|
||||
},
|
||||
'primary-text': {
|
||||
background: {
|
||||
@@ -363,7 +386,7 @@ const config = {
|
||||
},
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'background-color': '#fff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
'value-color': 'var(--c--theme--colors--primary-text)',
|
||||
@@ -381,7 +404,7 @@ const config = {
|
||||
'item-font-size': '14px',
|
||||
'border-radius': '4px',
|
||||
'border-radius-hover': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'background-color': '#fff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'border-color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
|
||||
@@ -73,6 +73,7 @@
|
||||
--c--theme--colors--primary-bg: #fafafa;
|
||||
--c--theme--colors--primary-150: #e5eefa;
|
||||
--c--theme--colors--info-150: #e5eefa;
|
||||
--c--theme--colors--greyscale-1000: #161616;
|
||||
--c--theme--font--sizes--h1: 2.2rem;
|
||||
--c--theme--font--sizes--h2: 1.7rem;
|
||||
--c--theme--font--sizes--h3: 1.37rem;
|
||||
@@ -104,7 +105,7 @@
|
||||
--c--theme--font--letterspacings--m: normal;
|
||||
--c--theme--font--letterspacings--s: normal;
|
||||
--c--theme--spacings--0: 0;
|
||||
--c--theme--spacings--xl: 4rem;
|
||||
--c--theme--spacings--xl: 2.5rem;
|
||||
--c--theme--spacings--l: 3rem;
|
||||
--c--theme--spacings--b: 1.625rem;
|
||||
--c--theme--spacings--s: 1rem;
|
||||
@@ -114,6 +115,20 @@
|
||||
--c--theme--spacings--auto: auto;
|
||||
--c--theme--spacings--bx: 2.2rem;
|
||||
--c--theme--spacings--full: 100%;
|
||||
--c--theme--spacings--4xs: 0.125rem;
|
||||
--c--theme--spacings--3xs: 0.25rem;
|
||||
--c--theme--spacings--2xs: 0.375rem;
|
||||
--c--theme--spacings--xs: 0.5rem;
|
||||
--c--theme--spacings--sm: 0.75rem;
|
||||
--c--theme--spacings--base: 1rem;
|
||||
--c--theme--spacings--md: 1.5rem;
|
||||
--c--theme--spacings--lg: 2rem;
|
||||
--c--theme--spacings--xxl: 3rem;
|
||||
--c--theme--spacings--xxxl: 3.5rem;
|
||||
--c--theme--spacings--4xl: 4rem;
|
||||
--c--theme--spacings--5xl: 4.5rem;
|
||||
--c--theme--spacings--6xl: 6rem;
|
||||
--c--theme--spacings--7xl: 7.5rem;
|
||||
--c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
|
||||
--c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
|
||||
--c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
@@ -359,16 +374,22 @@
|
||||
--c--theme--colors--secondary-800: #341f1f;
|
||||
--c--theme--colors--secondary-900: #2b1919;
|
||||
--c--theme--colors--greyscale-text: #303c4b;
|
||||
--c--theme--colors--greyscale-000: #f6f6f6;
|
||||
--c--theme--colors--greyscale-000: #fff;
|
||||
--c--theme--colors--greyscale-050: #f6f6f6;
|
||||
--c--theme--colors--greyscale-100: #eee;
|
||||
--c--theme--colors--greyscale-200: #e5e5e5;
|
||||
--c--theme--colors--greyscale-300: #e1e1e1;
|
||||
--c--theme--colors--greyscale-400: #ddd;
|
||||
--c--theme--colors--greyscale-500: #cecece;
|
||||
--c--theme--colors--greyscale-600: #7b7b7b;
|
||||
--c--theme--colors--greyscale-700: #666;
|
||||
--c--theme--colors--greyscale-250: #ddd;
|
||||
--c--theme--colors--greyscale-300: #cecece;
|
||||
--c--theme--colors--greyscale-350: #ddd;
|
||||
--c--theme--colors--greyscale-400: #929292;
|
||||
--c--theme--colors--greyscale-500: #7c7c7c;
|
||||
--c--theme--colors--greyscale-600: #666;
|
||||
--c--theme--colors--greyscale-700: #3a3a3a;
|
||||
--c--theme--colors--greyscale-750: #353535;
|
||||
--c--theme--colors--greyscale-800: #2a2a2a;
|
||||
--c--theme--colors--greyscale-900: #1e1e1e;
|
||||
--c--theme--colors--greyscale-900: #242424;
|
||||
--c--theme--colors--greyscale-950: #1e1e1e;
|
||||
--c--theme--colors--greyscale-1000: #161616;
|
||||
--c--theme--colors--success-text: #1f8d49;
|
||||
--c--theme--colors--success-100: #dffee6;
|
||||
--c--theme--colors--success-200: #b8fec9;
|
||||
@@ -819,6 +840,10 @@
|
||||
color: var(--c--theme--colors--info-150);
|
||||
}
|
||||
|
||||
.clr-greyscale-1000 {
|
||||
color: var(--c--theme--colors--greyscale-1000);
|
||||
}
|
||||
|
||||
.bg-secondary-text {
|
||||
background-color: var(--c--theme--colors--secondary-text);
|
||||
}
|
||||
@@ -1115,6 +1140,10 @@
|
||||
background-color: var(--c--theme--colors--info-150);
|
||||
}
|
||||
|
||||
.bg-greyscale-1000 {
|
||||
background-color: var(--c--theme--colors--greyscale-1000);
|
||||
}
|
||||
|
||||
.fw-thin {
|
||||
font-weight: var(--c--theme--font--weights--thin);
|
||||
}
|
||||
@@ -1431,6 +1460,286 @@
|
||||
margin-right: var(--c--theme--spacings--full);
|
||||
}
|
||||
|
||||
.m-4xs {
|
||||
margin: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.mb-4xs {
|
||||
margin-bottom: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.mt-4xs {
|
||||
margin-top: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.ml-4xs {
|
||||
margin-left: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.mr-4xs {
|
||||
margin-right: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.m-3xs {
|
||||
margin: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.mb-3xs {
|
||||
margin-bottom: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.mt-3xs {
|
||||
margin-top: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.ml-3xs {
|
||||
margin-left: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.mr-3xs {
|
||||
margin-right: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.m-2xs {
|
||||
margin: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.mb-2xs {
|
||||
margin-bottom: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.mt-2xs {
|
||||
margin-top: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.ml-2xs {
|
||||
margin-left: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.mr-2xs {
|
||||
margin-right: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.m-xs {
|
||||
margin: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.mb-xs {
|
||||
margin-bottom: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.mt-xs {
|
||||
margin-top: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.ml-xs {
|
||||
margin-left: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.mr-xs {
|
||||
margin-right: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.m-sm {
|
||||
margin: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.mb-sm {
|
||||
margin-bottom: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.mt-sm {
|
||||
margin-top: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.ml-sm {
|
||||
margin-left: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.mr-sm {
|
||||
margin-right: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.m-base {
|
||||
margin: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.mb-base {
|
||||
margin-bottom: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.mt-base {
|
||||
margin-top: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.ml-base {
|
||||
margin-left: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.mr-base {
|
||||
margin-right: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.m-md {
|
||||
margin: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.mb-md {
|
||||
margin-bottom: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.mt-md {
|
||||
margin-top: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.ml-md {
|
||||
margin-left: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.mr-md {
|
||||
margin-right: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.m-lg {
|
||||
margin: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.mb-lg {
|
||||
margin-bottom: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.mt-lg {
|
||||
margin-top: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.ml-lg {
|
||||
margin-left: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.mr-lg {
|
||||
margin-right: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.m-xxl {
|
||||
margin: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.mb-xxl {
|
||||
margin-bottom: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.mt-xxl {
|
||||
margin-top: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.ml-xxl {
|
||||
margin-left: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.mr-xxl {
|
||||
margin-right: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.m-xxxl {
|
||||
margin: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.mb-xxxl {
|
||||
margin-bottom: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.mt-xxxl {
|
||||
margin-top: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.ml-xxxl {
|
||||
margin-left: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.mr-xxxl {
|
||||
margin-right: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.m-4xl {
|
||||
margin: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.mb-4xl {
|
||||
margin-bottom: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.mt-4xl {
|
||||
margin-top: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.ml-4xl {
|
||||
margin-left: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.mr-4xl {
|
||||
margin-right: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.m-5xl {
|
||||
margin: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.mb-5xl {
|
||||
margin-bottom: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.mt-5xl {
|
||||
margin-top: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.ml-5xl {
|
||||
margin-left: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.mr-5xl {
|
||||
margin-right: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.m-6xl {
|
||||
margin: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.mb-6xl {
|
||||
margin-bottom: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.mt-6xl {
|
||||
margin-top: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.ml-6xl {
|
||||
margin-left: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.mr-6xl {
|
||||
margin-right: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.m-7xl {
|
||||
margin: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.mb-7xl {
|
||||
margin-bottom: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.mt-7xl {
|
||||
margin-top: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.ml-7xl {
|
||||
margin-left: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.mr-7xl {
|
||||
margin-right: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: var(--c--theme--spacings--0);
|
||||
}
|
||||
@@ -1650,3 +1959,283 @@
|
||||
.pr-full {
|
||||
padding-right: var(--c--theme--spacings--full);
|
||||
}
|
||||
|
||||
.p-4xs {
|
||||
padding: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.pb-4xs {
|
||||
padding-bottom: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.pt-4xs {
|
||||
padding-top: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.pl-4xs {
|
||||
padding-left: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.pr-4xs {
|
||||
padding-right: var(--c--theme--spacings--4xs);
|
||||
}
|
||||
|
||||
.p-3xs {
|
||||
padding: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.pb-3xs {
|
||||
padding-bottom: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.pt-3xs {
|
||||
padding-top: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.pl-3xs {
|
||||
padding-left: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.pr-3xs {
|
||||
padding-right: var(--c--theme--spacings--3xs);
|
||||
}
|
||||
|
||||
.p-2xs {
|
||||
padding: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.pb-2xs {
|
||||
padding-bottom: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.pt-2xs {
|
||||
padding-top: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.pl-2xs {
|
||||
padding-left: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.pr-2xs {
|
||||
padding-right: var(--c--theme--spacings--2xs);
|
||||
}
|
||||
|
||||
.p-xs {
|
||||
padding: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.pb-xs {
|
||||
padding-bottom: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.pt-xs {
|
||||
padding-top: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.pl-xs {
|
||||
padding-left: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.pr-xs {
|
||||
padding-right: var(--c--theme--spacings--xs);
|
||||
}
|
||||
|
||||
.p-sm {
|
||||
padding: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.pb-sm {
|
||||
padding-bottom: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.pt-sm {
|
||||
padding-top: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.pl-sm {
|
||||
padding-left: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.pr-sm {
|
||||
padding-right: var(--c--theme--spacings--sm);
|
||||
}
|
||||
|
||||
.p-base {
|
||||
padding: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.pb-base {
|
||||
padding-bottom: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.pt-base {
|
||||
padding-top: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.pl-base {
|
||||
padding-left: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.pr-base {
|
||||
padding-right: var(--c--theme--spacings--base);
|
||||
}
|
||||
|
||||
.p-md {
|
||||
padding: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.pb-md {
|
||||
padding-bottom: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.pt-md {
|
||||
padding-top: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.pl-md {
|
||||
padding-left: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.pr-md {
|
||||
padding-right: var(--c--theme--spacings--md);
|
||||
}
|
||||
|
||||
.p-lg {
|
||||
padding: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.pb-lg {
|
||||
padding-bottom: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.pt-lg {
|
||||
padding-top: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.pl-lg {
|
||||
padding-left: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.pr-lg {
|
||||
padding-right: var(--c--theme--spacings--lg);
|
||||
}
|
||||
|
||||
.p-xxl {
|
||||
padding: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.pb-xxl {
|
||||
padding-bottom: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.pt-xxl {
|
||||
padding-top: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.pl-xxl {
|
||||
padding-left: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.pr-xxl {
|
||||
padding-right: var(--c--theme--spacings--xxl);
|
||||
}
|
||||
|
||||
.p-xxxl {
|
||||
padding: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.pb-xxxl {
|
||||
padding-bottom: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.pt-xxxl {
|
||||
padding-top: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.pl-xxxl {
|
||||
padding-left: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.pr-xxxl {
|
||||
padding-right: var(--c--theme--spacings--xxxl);
|
||||
}
|
||||
|
||||
.p-4xl {
|
||||
padding: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.pb-4xl {
|
||||
padding-bottom: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.pt-4xl {
|
||||
padding-top: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.pl-4xl {
|
||||
padding-left: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.pr-4xl {
|
||||
padding-right: var(--c--theme--spacings--4xl);
|
||||
}
|
||||
|
||||
.p-5xl {
|
||||
padding: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.pb-5xl {
|
||||
padding-bottom: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.pt-5xl {
|
||||
padding-top: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.pl-5xl {
|
||||
padding-left: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.pr-5xl {
|
||||
padding-right: var(--c--theme--spacings--5xl);
|
||||
}
|
||||
|
||||
.p-6xl {
|
||||
padding: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.pb-6xl {
|
||||
padding-bottom: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.pt-6xl {
|
||||
padding-top: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.pl-6xl {
|
||||
padding-left: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.pr-6xl {
|
||||
padding-right: var(--c--theme--spacings--6xl);
|
||||
}
|
||||
|
||||
.p-7xl {
|
||||
padding: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.pb-7xl {
|
||||
padding-bottom: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.pt-7xl {
|
||||
padding-top: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.pl-7xl {
|
||||
padding-left: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
.pr-7xl {
|
||||
padding-right: var(--c--theme--spacings--7xl);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export const tokens = {
|
||||
'secondary-700': '#97A3AE',
|
||||
'secondary-800': '#757E87',
|
||||
'secondary-900': '#596067',
|
||||
'info-text': '#FFFFFF',
|
||||
'info-text': '#fff',
|
||||
'info-100': '#EBF2FC',
|
||||
'info-200': '#8CB5EA',
|
||||
'info-300': '#5894E1',
|
||||
@@ -32,7 +32,7 @@ export const tokens = {
|
||||
'greyscale-700': '#555F6B',
|
||||
'greyscale-800': '#303C4B',
|
||||
'greyscale-900': '#0C1A2B',
|
||||
'greyscale-000': '#FFFFFF',
|
||||
'greyscale-000': '#fff',
|
||||
'primary-100': '#EDF5FA',
|
||||
'primary-200': '#8CB5EA',
|
||||
'primary-300': '#5894E1',
|
||||
@@ -69,14 +69,15 @@ export const tokens = {
|
||||
'danger-700': '#9B0000',
|
||||
'danger-800': '#780000',
|
||||
'danger-900': '#5C0000',
|
||||
'primary-text': '#FFFFFF',
|
||||
'success-text': '#FFFFFF',
|
||||
'warning-text': '#FFFFFF',
|
||||
'danger-text': '#FFFFFF',
|
||||
'primary-text': '#fff',
|
||||
'success-text': '#fff',
|
||||
'warning-text': '#fff',
|
||||
'danger-text': '#fff',
|
||||
'card-border': '#ededed',
|
||||
'primary-bg': '#FAFAFA',
|
||||
'primary-150': '#E5EEFA',
|
||||
'info-150': '#E5EEFA',
|
||||
'greyscale-1000': '#161616',
|
||||
},
|
||||
font: {
|
||||
sizes: {
|
||||
@@ -120,7 +121,7 @@ export const tokens = {
|
||||
},
|
||||
spacings: {
|
||||
'0': '0',
|
||||
xl: '4rem',
|
||||
xl: '2.5rem',
|
||||
l: '3rem',
|
||||
b: '1.625rem',
|
||||
s: '1rem',
|
||||
@@ -130,6 +131,20 @@ export const tokens = {
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
'4xs': '0.125rem',
|
||||
'3xs': '0.25rem',
|
||||
'2xs': '0.375rem',
|
||||
xs: '0.5rem',
|
||||
sm: '0.75rem',
|
||||
base: '1rem',
|
||||
md: '1.5rem',
|
||||
lg: '2rem',
|
||||
xxl: '3rem',
|
||||
xxxl: '3.5rem',
|
||||
'4xl': '4rem',
|
||||
'5xl': '4.5rem',
|
||||
'6xl': '6rem',
|
||||
'7xl': '7.5rem',
|
||||
},
|
||||
transitions: {
|
||||
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
|
||||
@@ -202,7 +217,7 @@ export const tokens = {
|
||||
focus: 'var(--c--components--forms-select--border-radius)',
|
||||
},
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
'menu-background-color': '#ffffff',
|
||||
'menu-background-color': '#fff',
|
||||
'item-background-color': {
|
||||
hover: 'var(--c--theme--colors--primary-300)',
|
||||
},
|
||||
@@ -223,7 +238,7 @@ export const tokens = {
|
||||
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
modal: { 'background-color': '#ffffff' },
|
||||
modal: { 'background-color': '#fff' },
|
||||
button: {
|
||||
'border-radius': {
|
||||
active: 'var(--c--components--button--border-radius)',
|
||||
@@ -346,7 +361,7 @@ export const tokens = {
|
||||
'primary-700': '#272747',
|
||||
'primary-800': '#21213f',
|
||||
'primary-900': '#1c1a36',
|
||||
'secondary-text': '#FFFFFF',
|
||||
'secondary-text': '#fff',
|
||||
'secondary-100': '#fee9ea',
|
||||
'secondary-200': '#fedfdf',
|
||||
'secondary-300': '#fdbfbf',
|
||||
@@ -357,16 +372,22 @@ export const tokens = {
|
||||
'secondary-800': '#341f1f',
|
||||
'secondary-900': '#2b1919',
|
||||
'greyscale-text': '#303C4B',
|
||||
'greyscale-000': '#f6f6f6',
|
||||
'greyscale-100': '#eeeeee',
|
||||
'greyscale-200': '#e5e5e5',
|
||||
'greyscale-300': '#e1e1e1',
|
||||
'greyscale-400': '#dddddd',
|
||||
'greyscale-500': '#cecece',
|
||||
'greyscale-600': '#7b7b7b',
|
||||
'greyscale-700': '#666666',
|
||||
'greyscale-800': '#2a2a2a',
|
||||
'greyscale-900': '#1e1e1e',
|
||||
'greyscale-000': '#fff',
|
||||
'greyscale-050': '#F6F6F6',
|
||||
'greyscale-100': '#eee',
|
||||
'greyscale-200': '#E5E5E5',
|
||||
'greyscale-250': '#ddd',
|
||||
'greyscale-300': '#CECECE',
|
||||
'greyscale-350': '#ddd',
|
||||
'greyscale-400': '#929292',
|
||||
'greyscale-500': '#7C7C7C',
|
||||
'greyscale-600': '#666666',
|
||||
'greyscale-700': '#3A3A3A',
|
||||
'greyscale-750': '#353535',
|
||||
'greyscale-800': '#2A2A2A',
|
||||
'greyscale-900': '#242424',
|
||||
'greyscale-950': '#1E1E1E',
|
||||
'greyscale-1000': '#161616',
|
||||
'success-text': '#1f8d49',
|
||||
'success-100': '#dffee6',
|
||||
'success-200': '#b8fec9',
|
||||
@@ -427,9 +448,9 @@ export const tokens = {
|
||||
'color-hover': '#1212ff',
|
||||
'color-active': '#2323ff',
|
||||
},
|
||||
color: '#ffffff',
|
||||
'color-hover': '#ffffff',
|
||||
'color-active': '#ffffff',
|
||||
color: '#fff',
|
||||
'color-hover': '#fff',
|
||||
'color-active': '#fff',
|
||||
},
|
||||
'primary-text': {
|
||||
background: {
|
||||
@@ -486,7 +507,7 @@ export const tokens = {
|
||||
},
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'background-color': '#fff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
'value-color': 'var(--c--theme--colors--primary-text)',
|
||||
@@ -502,7 +523,7 @@ export const tokens = {
|
||||
'item-font-size': '14px',
|
||||
'border-radius': '4px',
|
||||
'border-radius-hover': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'background-color': '#fff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'border-color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
|
||||
Reference in New Issue
Block a user