💄(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
@@ -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%',
|
||||
'050V': '2px',
|
||||
'100V': '4px',
|
||||
'150V': '6px',
|
||||
'100W': '8px',
|
||||
'300V': '12px',
|
||||
'200W': '16px',
|
||||
'300W': '24px',
|
||||
'400W': '32px',
|
||||
'500W': '40px',
|
||||
'600W': '48px',
|
||||
'700W': '56px',
|
||||
'800W': '64px',
|
||||
'900W': '72px',
|
||||
'1200W': '96px',
|
||||
'1500W': '120px',
|
||||
},
|
||||
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': {
|
||||
@@ -196,6 +213,23 @@ const config = {
|
||||
},
|
||||
dsfr: {
|
||||
theme: {
|
||||
spacings: {
|
||||
'050V': '2px',
|
||||
'100V': '4px',
|
||||
'150V': '6px',
|
||||
'100W': '8px',
|
||||
'300V': '12px',
|
||||
'200W': '16px',
|
||||
'300W': '24px',
|
||||
'400W': '32px',
|
||||
'500W': '40px',
|
||||
'600W': '48px',
|
||||
'700W': '56px',
|
||||
'800W': '64px',
|
||||
'900W': '72px',
|
||||
'1200W': '96px',
|
||||
'1500W': '120px',
|
||||
},
|
||||
colors: {
|
||||
'card-border': '#ededed',
|
||||
'primary-text': '#000091',
|
||||
@@ -209,7 +243,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 +254,16 @@ 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-400': '#929292',
|
||||
'greyscale-500': '#666',
|
||||
'greyscale-700': '#3A3A3A',
|
||||
'greyscale-1000': '#161616',
|
||||
'success-text': '#1f8d49',
|
||||
'success-100': '#dffee6',
|
||||
'success-200': '#b8fec9',
|
||||
@@ -297,9 +331,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 +397,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 +415,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)',
|
||||
|
||||
@@ -114,6 +114,21 @@
|
||||
--c--theme--spacings--auto: auto;
|
||||
--c--theme--spacings--bx: 2.2rem;
|
||||
--c--theme--spacings--full: 100%;
|
||||
--c--theme--spacings--050v: 2px;
|
||||
--c--theme--spacings--100v: 4px;
|
||||
--c--theme--spacings--150v: 6px;
|
||||
--c--theme--spacings--100w: 8px;
|
||||
--c--theme--spacings--300v: 12px;
|
||||
--c--theme--spacings--200w: 16px;
|
||||
--c--theme--spacings--300w: 24px;
|
||||
--c--theme--spacings--400w: 32px;
|
||||
--c--theme--spacings--500w: 40px;
|
||||
--c--theme--spacings--600w: 48px;
|
||||
--c--theme--spacings--700w: 56px;
|
||||
--c--theme--spacings--800w: 64px;
|
||||
--c--theme--spacings--900w: 72px;
|
||||
--c--theme--spacings--1200w: 96px;
|
||||
--c--theme--spacings--1500w: 120px;
|
||||
--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);
|
||||
@@ -336,6 +351,21 @@
|
||||
}
|
||||
|
||||
.cunningham-theme--dsfr {
|
||||
--c--theme--spacings--050V: 2px;
|
||||
--c--theme--spacings--100V: 4px;
|
||||
--c--theme--spacings--150V: 6px;
|
||||
--c--theme--spacings--100W: 8px;
|
||||
--c--theme--spacings--300V: 12px;
|
||||
--c--theme--spacings--200W: 16px;
|
||||
--c--theme--spacings--300W: 24px;
|
||||
--c--theme--spacings--400W: 32px;
|
||||
--c--theme--spacings--500W: 40px;
|
||||
--c--theme--spacings--600W: 48px;
|
||||
--c--theme--spacings--700W: 56px;
|
||||
--c--theme--spacings--800W: 64px;
|
||||
--c--theme--spacings--900W: 72px;
|
||||
--c--theme--spacings--1200W: 96px;
|
||||
--c--theme--spacings--1500W: 120px;
|
||||
--c--theme--colors--card-border: #ededed;
|
||||
--c--theme--colors--primary-text: #000091;
|
||||
--c--theme--colors--primary-100: #f5f5fe;
|
||||
@@ -359,16 +389,16 @@
|
||||
--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-800: #2a2a2a;
|
||||
--c--theme--colors--greyscale-900: #1e1e1e;
|
||||
--c--theme--colors--greyscale-250: #ddd;
|
||||
--c--theme--colors--greyscale-300: #cecece;
|
||||
--c--theme--colors--greyscale-400: #929292;
|
||||
--c--theme--colors--greyscale-500: #666;
|
||||
--c--theme--colors--greyscale-700: #3a3a3a;
|
||||
--c--theme--colors--greyscale-1000: #161616;
|
||||
--c--theme--colors--success-text: #1f8d49;
|
||||
--c--theme--colors--success-100: #dffee6;
|
||||
--c--theme--colors--success-200: #b8fec9;
|
||||
@@ -1431,6 +1461,306 @@
|
||||
margin-right: var(--c--theme--spacings--full);
|
||||
}
|
||||
|
||||
.m-050V {
|
||||
margin: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.mb-050V {
|
||||
margin-bottom: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.mt-050V {
|
||||
margin-top: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.ml-050V {
|
||||
margin-left: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.mr-050V {
|
||||
margin-right: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.m-100V {
|
||||
margin: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.mb-100V {
|
||||
margin-bottom: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.mt-100V {
|
||||
margin-top: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.ml-100V {
|
||||
margin-left: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.mr-100V {
|
||||
margin-right: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.m-150V {
|
||||
margin: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.mb-150V {
|
||||
margin-bottom: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.mt-150V {
|
||||
margin-top: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.ml-150V {
|
||||
margin-left: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.mr-150V {
|
||||
margin-right: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.m-100W {
|
||||
margin: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.mb-100W {
|
||||
margin-bottom: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.mt-100W {
|
||||
margin-top: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.ml-100W {
|
||||
margin-left: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.mr-100W {
|
||||
margin-right: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.m-300V {
|
||||
margin: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.mb-300V {
|
||||
margin-bottom: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.mt-300V {
|
||||
margin-top: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.ml-300V {
|
||||
margin-left: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.mr-300V {
|
||||
margin-right: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.m-200W {
|
||||
margin: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.mb-200W {
|
||||
margin-bottom: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.mt-200W {
|
||||
margin-top: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.ml-200W {
|
||||
margin-left: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.mr-200W {
|
||||
margin-right: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.m-300W {
|
||||
margin: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.mb-300W {
|
||||
margin-bottom: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.mt-300W {
|
||||
margin-top: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.ml-300W {
|
||||
margin-left: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.mr-300W {
|
||||
margin-right: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.m-400W {
|
||||
margin: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.mb-400W {
|
||||
margin-bottom: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.mt-400W {
|
||||
margin-top: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.ml-400W {
|
||||
margin-left: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.mr-400W {
|
||||
margin-right: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.m-500W {
|
||||
margin: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.mb-500W {
|
||||
margin-bottom: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.mt-500W {
|
||||
margin-top: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.ml-500W {
|
||||
margin-left: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.mr-500W {
|
||||
margin-right: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.m-600W {
|
||||
margin: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.mb-600W {
|
||||
margin-bottom: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.mt-600W {
|
||||
margin-top: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.ml-600W {
|
||||
margin-left: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.mr-600W {
|
||||
margin-right: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.m-700W {
|
||||
margin: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.mb-700W {
|
||||
margin-bottom: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.mt-700W {
|
||||
margin-top: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.ml-700W {
|
||||
margin-left: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.mr-700W {
|
||||
margin-right: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.m-800W {
|
||||
margin: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.mb-800W {
|
||||
margin-bottom: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.mt-800W {
|
||||
margin-top: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.ml-800W {
|
||||
margin-left: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.mr-800W {
|
||||
margin-right: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.m-900W {
|
||||
margin: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.mb-900W {
|
||||
margin-bottom: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.mt-900W {
|
||||
margin-top: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.ml-900W {
|
||||
margin-left: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.mr-900W {
|
||||
margin-right: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.m-1200W {
|
||||
margin: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.mb-1200W {
|
||||
margin-bottom: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.mt-1200W {
|
||||
margin-top: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.ml-1200W {
|
||||
margin-left: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.mr-1200W {
|
||||
margin-right: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.m-1500W {
|
||||
margin: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.mb-1500W {
|
||||
margin-bottom: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.mt-1500W {
|
||||
margin-top: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.ml-1500W {
|
||||
margin-left: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.mr-1500W {
|
||||
margin-right: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: var(--c--theme--spacings--0);
|
||||
}
|
||||
@@ -1650,3 +1980,303 @@
|
||||
.pr-full {
|
||||
padding-right: var(--c--theme--spacings--full);
|
||||
}
|
||||
|
||||
.p-050V {
|
||||
padding: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.pb-050V {
|
||||
padding-bottom: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.pt-050V {
|
||||
padding-top: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.pl-050V {
|
||||
padding-left: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.pr-050V {
|
||||
padding-right: var(--c--theme--spacings--050V);
|
||||
}
|
||||
|
||||
.p-100V {
|
||||
padding: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.pb-100V {
|
||||
padding-bottom: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.pt-100V {
|
||||
padding-top: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.pl-100V {
|
||||
padding-left: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.pr-100V {
|
||||
padding-right: var(--c--theme--spacings--100V);
|
||||
}
|
||||
|
||||
.p-150V {
|
||||
padding: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.pb-150V {
|
||||
padding-bottom: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.pt-150V {
|
||||
padding-top: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.pl-150V {
|
||||
padding-left: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.pr-150V {
|
||||
padding-right: var(--c--theme--spacings--150V);
|
||||
}
|
||||
|
||||
.p-100W {
|
||||
padding: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.pb-100W {
|
||||
padding-bottom: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.pt-100W {
|
||||
padding-top: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.pl-100W {
|
||||
padding-left: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.pr-100W {
|
||||
padding-right: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.p-300V {
|
||||
padding: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.pb-300V {
|
||||
padding-bottom: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.pt-300V {
|
||||
padding-top: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.pl-300V {
|
||||
padding-left: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.pr-300V {
|
||||
padding-right: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
.p-200W {
|
||||
padding: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.pb-200W {
|
||||
padding-bottom: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.pt-200W {
|
||||
padding-top: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.pl-200W {
|
||||
padding-left: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.pr-200W {
|
||||
padding-right: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
.p-300W {
|
||||
padding: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.pb-300W {
|
||||
padding-bottom: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.pt-300W {
|
||||
padding-top: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.pl-300W {
|
||||
padding-left: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.pr-300W {
|
||||
padding-right: var(--c--theme--spacings--300W);
|
||||
}
|
||||
|
||||
.p-400W {
|
||||
padding: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.pb-400W {
|
||||
padding-bottom: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.pt-400W {
|
||||
padding-top: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.pl-400W {
|
||||
padding-left: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.pr-400W {
|
||||
padding-right: var(--c--theme--spacings--400W);
|
||||
}
|
||||
|
||||
.p-500W {
|
||||
padding: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.pb-500W {
|
||||
padding-bottom: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.pt-500W {
|
||||
padding-top: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.pl-500W {
|
||||
padding-left: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.pr-500W {
|
||||
padding-right: var(--c--theme--spacings--500W);
|
||||
}
|
||||
|
||||
.p-600W {
|
||||
padding: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.pb-600W {
|
||||
padding-bottom: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.pt-600W {
|
||||
padding-top: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.pl-600W {
|
||||
padding-left: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.pr-600W {
|
||||
padding-right: var(--c--theme--spacings--600W);
|
||||
}
|
||||
|
||||
.p-700W {
|
||||
padding: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.pb-700W {
|
||||
padding-bottom: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.pt-700W {
|
||||
padding-top: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.pl-700W {
|
||||
padding-left: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.pr-700W {
|
||||
padding-right: var(--c--theme--spacings--700W);
|
||||
}
|
||||
|
||||
.p-800W {
|
||||
padding: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.pb-800W {
|
||||
padding-bottom: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.pt-800W {
|
||||
padding-top: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.pl-800W {
|
||||
padding-left: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.pr-800W {
|
||||
padding-right: var(--c--theme--spacings--800W);
|
||||
}
|
||||
|
||||
.p-900W {
|
||||
padding: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.pb-900W {
|
||||
padding-bottom: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.pt-900W {
|
||||
padding-top: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.pl-900W {
|
||||
padding-left: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.pr-900W {
|
||||
padding-right: var(--c--theme--spacings--900W);
|
||||
}
|
||||
|
||||
.p-1200W {
|
||||
padding: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.pb-1200W {
|
||||
padding-bottom: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.pt-1200W {
|
||||
padding-top: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.pl-1200W {
|
||||
padding-left: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.pr-1200W {
|
||||
padding-right: var(--c--theme--spacings--1200W);
|
||||
}
|
||||
|
||||
.p-1500W {
|
||||
padding: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.pb-1500W {
|
||||
padding-bottom: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.pt-1500W {
|
||||
padding-top: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.pl-1500W {
|
||||
padding-left: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
.pr-1500W {
|
||||
padding-right: var(--c--theme--spacings--1500W);
|
||||
}
|
||||
|
||||
@@ -130,6 +130,21 @@ export const tokens = {
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
'050V': '2px',
|
||||
'100V': '4px',
|
||||
'150V': '6px',
|
||||
'100W': '8px',
|
||||
'300V': '12px',
|
||||
'200W': '16px',
|
||||
'300W': '24px',
|
||||
'400W': '32px',
|
||||
'500W': '40px',
|
||||
'600W': '48px',
|
||||
'700W': '56px',
|
||||
'800W': '64px',
|
||||
'900W': '72px',
|
||||
'1200W': '96px',
|
||||
'1500W': '120px',
|
||||
},
|
||||
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)',
|
||||
@@ -333,6 +348,23 @@ export const tokens = {
|
||||
},
|
||||
dsfr: {
|
||||
theme: {
|
||||
spacings: {
|
||||
'050V': '2px',
|
||||
'100V': '4px',
|
||||
'150V': '6px',
|
||||
'100W': '8px',
|
||||
'300V': '12px',
|
||||
'200W': '16px',
|
||||
'300W': '24px',
|
||||
'400W': '32px',
|
||||
'500W': '40px',
|
||||
'600W': '48px',
|
||||
'700W': '56px',
|
||||
'800W': '64px',
|
||||
'900W': '72px',
|
||||
'1200W': '96px',
|
||||
'1500W': '120px',
|
||||
},
|
||||
colors: {
|
||||
'card-border': '#ededed',
|
||||
'primary-text': '#000091',
|
||||
@@ -346,7 +378,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 +389,16 @@ 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-400': '#929292',
|
||||
'greyscale-500': '#666',
|
||||
'greyscale-700': '#3A3A3A',
|
||||
'greyscale-1000': '#161616',
|
||||
'success-text': '#1f8d49',
|
||||
'success-100': '#dffee6',
|
||||
'success-200': '#b8fec9',
|
||||
@@ -427,9 +459,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 +518,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 +534,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