@ionic-internal/ionic-ds
Version:
Ionic Design System
412 lines (399 loc) • 7.58 kB
YAML
fontFamilies:
display: 'IonEina, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif'
text: 'Inter, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif'
system: 'apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif'
monospace: '"SF Mono", "Roboto Mono", Menlo, monospace'
serif: '"Adobe Caslon", Georgia, Times, "Times New Roman", serif'
fontWeights:
thin: 100
extraLight: 200
light: 300
regular: 400
medium: 500
semiBold: 600
bold: 700
extraBold: 800
black: 900
extraBlack: 950
fontSizes:
10: 0.625rem
11: 0.6875rem
12: 0.75rem
13: 0.8125rem
14: 0.875rem
16: 1.00rem
20: 1.25rem
24: 1.50rem
28: 1.75rem
32: 2.00rem
40: 2.50rem
48: 3.00rem
56: 3.50rem
64: 4.00rem
72: 4.50rem
80: 5.00rem
88: 5.50rem
96: 6.00rem
lineHeights:
solid: 1.0
title: 1.12
body: 1.6
prose: 1.8
letterSpacings:
dense: -0.04em
tight: -0.02em
solid: 0.00em
wide: 0.04em
super: 0.08em
extra: 0.16em
space:
0: 0rem
4: 0.25rem
8: 0.50rem
12: 0.75rem
16: 1.00rem
20: 1.25rem
24: 1.5rem
32: 2.00rem
40: 2.50rem
48: 3.00rem
64: 4.00rem
80: 5.00rem
96: 6.00rem
128: 8.00rem
160: 10.00rem
192: 12.00rem
224: 14.00rem
256: 16.00rem
breakpoints:
- 40em
- 48em
- 64em
- 80em
radii:
0: 0px
6: 6px
8: 8px
16: 16px
24: 24px
x: 1000px
borders:
regular: 1px solid
dashed: 1px dashed
heavy: 2px solid
shadows:
0: 0 0 0 1px rgba(0, 0, 0, 0)
1: 0 0 0 1px rgba(0, 0, 0, 0.06)
2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.04)
3: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.06)
4: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.06)
5: 0 8px 16px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06)
6: 0 16px 32px -2px rgba(0, 0, 0, 0.1), 0 8px 16px -2px rgba(0, 0, 0, 0.08)
7: 0 32px 64px -4px rgba(0, 0, 0, 0.12), 0 12px 24px -2px rgba(0, 0, 0, 0.06)
8: 0 48px 96px -8px rgba(0, 0, 0, 0.16), 0 24px 48px -4px rgba(0, 0, 0, 0.08)
durations:
instantly: '0s'
quickly: '0.15s'
colors:
black: '#000000'
white: '#ffffff'
blue:
0: '#f0f6ff'
10: '#e3edff'
20: '#cddfff'
30: '#b2ceff'
40: '#97bdff'
50: '#7cabff'
60: '#639bff'
70: '#4d8dff'
80: '#3880ff'
90: '#176BFF'
100: '#0054e9'
110: '#004DD6'
120: '#0046C1'
130: '#003FAE'
140: '#00389B'
150: '#002D7C'
160: '#002669'
170: '#001D52'
180: '#001740'
190: '#00112F'
200: '#000B1F'
gray:
0: '#f3f3f3'
10: '#e4e4e4'
20: '#c8c8c8'
30: '#aeaeae'
40: '#959595'
50: '#818181'
60: '#6d6d6d'
70: '#5f5f5f'
80: '#474747'
90: '#2f2f2f'
100: '#141414'
carbon:
0: '#eef1f3'
10: '#d7dde2'
20: '#b4bcc6'
30: '#98a2ad'
40: '#7d8894'
50: '#677483'
60: '#556170'
70: '#434f5e'
80: '#35404e'
90: '#222d3a'
100: '#03060b'
indigo:
0: '#fbfbfd'
10: '#f6f8fc'
20: '#e9edf3'
30: '#dee3ea'
40: '#ced6e0'
50: '#b2becd'
60: '#92a0b3'
70: '#73849a'
80: '#445b78'
90: '#2d4665'
100: '#001a3a'
green:
0: '#f1fdf5'
10: '#deffe7'
20: '#c7fbd5'
30: '#a7f1bb'
40: '#80e89d'
50: '#62e085'
60: '#4ada71'
70: '#2dd55b'
80: '#17c948'
90: '#00ba33'
100: '#00a52d'
110: '#009B2B'
120: '#009128'
130: '#008725'
140: '#007D22'
150: '#00711F'
160: '#00661C'
170: '#00581A'
180: '#004314'
190: '#002F0E'
200: '#001807'
lime:
0: '#f5fff0'
10: '#ebfee3'
20: '#ddfcd0'
30: '#cffbbc'
40: '#bbf9a2'
50: '#a3f581'
60: '#8bf35f'
70: '#64ec44'
80: '#4ddf2b'
90: '#3ad515'
100: '#27c100'
110: '#25B400'
120: '#22A400'
130: '#1E9200'
140: '#1A7E00'
150: '#176D00'
160: '#135A00'
170: '#0F4900'
180: '#0C3900'
190: '#092C00'
200: '#061D00'
lavender:
0: '#f7f8ff'
10: '#e6ebff'
20: '#ced9ff'
30: '#b6c6ff'
40: '#9fb5ff'
50: '#8aa4ff'
60: '#7493ff'
70: '#597eff'
80: '#3c67ff'
90: '#194bfd'
100: '#0033e8'
110: '#002DCC'
120: '#0028B8'
130: '#0023A2'
140: '#002092'
150: '#001A79'
160: '#001560'
170: '#00114E'
180: '#000E41'
190: '#000A30'
200: '#000721'
purple:
0: '#f4f4ff'
10: '#e9eaff'
20: '#d0d2ff'
30: '#b6b9f9'
40: '#9a99fc'
50: '#8482fb'
60: '#786df9'
70: '#6e5afd'
80: '#6030ff'
90: '#4712fb'
100: '#3400e6'
110: '#3000D1'
120: '#2B00BC'
130: '#2600A6'
140: '#20008E'
150: '#1B0075'
160: '#15005C'
170: '#100048'
180: '#0D0038'
190: '#0B0030'
200: '#080022'
pink:
0: '#ffeff5'
10: '#ffe3ed'
20: '#ffd8e5'
30: '#ffc9db'
40: '#ffb6d0'
50: '#ff99bd'
60: '#ff80ac'
70: '#ff6098'
80: '#fb4082'
90: '#ec216a'
100: '#da0d56'
110: '#D0004A'
120: '#C40046'
130: '#B30040'
140: '#A3003B'
150: '#940035'
160: '#850030'
170: '#710029'
180: '#5F0022'
190: '#460019'
200: '#20000B'
red:
0: '#fff1f3'
10: '#ffe6e8'
20: '#ffcfd3'
30: '#feb7bc'
40: '#fc9aa2'
50: '#f9838c'
60: '#f56570'
70: '#f24c58'
80: '#ef3442'
90: '#e21827'
100: '#d0000f'
110: '#C5000F'
120: '#B3000E'
130: '#9C000C'
140: '#89000B'
150: '#760009'
160: '#650008'
170: '#520006'
180: '#410005'
190: '#300004'
200: '#1D0002'
orange:
0: '#fff5f0'
10: '#ffede6'
20: '#ffdfd1'
30: '#ffd0bc'
40: '#ffc0a5'
50: '#ffaf8c'
60: '#ff9b70'
70: '#ff8753'
80: '#ff7336'
90: '#ff5b13'
100: '#eb4700'
110: '#D94200'
120: '#C93D00'
130: '#B63700'
140: '#A53200'
150: '#8C2A00'
160: '#772400'
170: '#5E1C00'
180: '#481600'
190: '#341000'
200: '#1D0900'
yellow:
0: '#fffbef'
10: '#fff8e2'
20: '#fff4d1'
30: '#ffefbd'
40: '#ffe9a3'
50: '#ffe080'
60: '#ffd75a'
70: '#ffce31'
80: '#ffc409'
90: '#f4b100'
100: '#eaa100'
110: '#DD9800'
120: '#CC8D00'
130: '#BE8300'
140: '#B17A00'
150: '#9C6C00'
160: '#8A6000'
170: '#755100'
180: '#5F4100'
190: '#452F00'
200: '#231800'
aqua:
0: '#f0fff9'
10: '#e6fff6'
20: '#ceffed'
30: '#b7fce3'
40: '#93f9d5'
50: '#79f5c9'
60: '#59f0ba'
70: '#38e9aa'
80: '#1ae19a'
90: '#00d287'
100: '#00ba78'
110: '#00AA6D'
120: '#009B63'
130: '#00915C'
140: '#008152'
150: '#016E46'
160: '#015D3C'
170: '#014F32'
180: '#013E28'
190: '#012E1E'
200: '#011E13'
teal:
0: '#eefeff'
10: '#dffdff'
20: '#d0fdff'
30: '#bbfcff'
40: '#a2fcff'
50: '#8bfbff'
60: '#73f6fb'
70: '#55ecf2'
80: '#35e2e9'
90: '#1bd2d9'
100: '#00b9c0'
110: '#01ADB4'
120: '#019FA5'
130: '#018F94'
140: '#017E83'
150: '#016D71'
160: '#015D61'
170: '#014D4F'
180: '#013C3E'
190: '#012C2E'
200: '#011C1D'
cyan:
0: '#f3faff'
10: '#e8f5ff'
20: '#d3ecff'
30: '#bfe4ff'
40: '#a7daff'
50: '#8dcfff'
60: '#77c6ff'
70: '#62bdff'
80: '#46b1ff'
90: '#24a3ff'
100: '#0091fa'
110: '#0189EC'
120: '#017ED8'
130: '#0170C0'
140: '#0163AA'
150: '#015592'
160: '#01487B'
170: '#013A64'
180: '#012D4D'
190: '#011E33'
200: '#01121E'