diff --git a/src/dsdl.html b/src/dsdl.html index ef36e9fb..4e7c0269 100644 --- a/src/dsdl.html +++ b/src/dsdl.html @@ -117,45 +117,45 @@

Core styles

Large
-
font-size
-
40px
-
font-weight
-
700
-
line-height
-
1.25
+
font-size:
+
40px
+
font-weight:
+
700
+
line-height:
+
1.25
Amazingly few discotheques provide jukeboxes.
-
font-size
-
32px
-
font-weight
-
600
-
line-height
-
1.25
+
font-size:
+
32px
+
font-weight:
+
600
+
line-height:
+
1.25
Amazingly few discotheques provide jukeboxes.
-
font-size
-
24px
-
font-weight
-
500
-
line-height
-
1.25
+
font-size:
+
24px
+
font-weight:
+
500
+
line-height:
+
1.25
Amazingly few discotheques provide jukeboxes.
-
font-size
-
16px
-
font-weight
-
400
-
line-height
-
1.5
+
font-size:
+
16px
+
font-weight:
+
400
+
line-height:
+
1.5
Amazingly few discotheques provide jukeboxes.
@@ -164,45 +164,45 @@

Core styles

Medium
-
font-size
-
32px
-
font-weight
-
700
-
line-height
-
1.25
+
font-size:
+
32px
+
font-weight:
+
700
+
line-height:
+
1.25
Amazingly few discotheques provide jukeboxes.
-
font-size
-
24px
-
font-weight
-
600
-
line-height
-
1.25
+
font-size:
+
24px
+
font-weight:
+
600
+
line-height:
+
1.25
Amazingly few discotheques provide jukeboxes.
-
font-size
-
20px
-
font-weight
-
500
-
line-height
-
1.5
+
font-size:
+
20px
+
font-weight:
+
500
+
line-height:
+
1.5
Amazingly few discotheques provide jukeboxes.
-
font-size
-
14px
-
font-weight
-
400
-
line-height
-
1.625
+
font-size:
+
14px
+
font-weight:
+
400
+
line-height:
+
1.625
Amazingly few discotheques provide jukeboxes.
@@ -211,45 +211,45 @@

Core styles

Small
-
font-size
-
24px
-
font-weight
-
700
-
line-height
-
1.25
+
font-size:
+
24px
+
font-weight:
+
700
+
line-height:
+
1.25
Amazingly few discotheques provide jukeboxes.
-
font-size
-
16px
-
font-weight
-
600
-
line-height
-
1.5
+
font-size:
+
16px
+
font-weight:
+
600
+
line-height:
+
1.5
Amazingly few discotheques provide jukeboxes.
-
font-size
-
16px
-
font-weight
-
500
-
line-height
-
1.5
+
font-size:
+
16px
+
font-weight:
+
500
+
line-height:
+
1.5
Amazingly few discotheques provide jukeboxes.
-
font-size
-
12px
-
font-weight
-
400
-
line-height
-
1.625
+
font-size:
+
12px
+
font-weight:
+
400
+
line-height:
+
1.625
Amazingly few discotheques provide jukeboxes.
@@ -262,65 +262,223 @@

Core styles

  • Display

    -
    font-size
    -
    64px
    -
    font-weight
    -
    600
    -
    line-height
    -
    1.125
    +
    font-size:
    +
    64px
    +
    font-weight:
    +
    600
    +
    line-height:
    +
    1.125
    Amazingly few discotheques provide jukeboxes.

  • Small caps

    -
    font-size
    -
    12px
    -
    font-weight
    -
    400
    -
    line-height
    -
    1.625
    -
    text-transform
    -
    uppercase
    +
    font-size:
    +
    12px
    +
    font-weight:
    +
    400
    +
    line-height:
    +
    1.625
    +
    text-transform:
    +
    uppercase
    Amazingly few discotheques provide jukeboxes.

  • Caption

    -
    font-size
    -
    12px
    -
    font-weight
    -
    400
    -
    line-height
    -
    1.625
    +
    font-size:
    +
    12px
    +
    font-weight:
    +
    400
    +
    line-height:
    +
    1.625
    Amazingly few discotheques provide jukeboxes.

  • Footnote

    -
    font-size
    -
    10px
    -
    font-weight
    -
    400
    -
    line-height
    -
    1.625
    +
    font-size:
    +
    10px
    +
    font-weight:
    +
    400
    +
    line-height:
    +
    1.625
    Amazingly few discotheques provide jukeboxes.

  • Code

    -
    font-size
    -
    16px
    -
    font-weight
    -
    400
    -
    line-height
    -
    1.625
    +
    font-size:
    +
    16px
    +
    font-weight:
    +
    400
    +
    line-height:
    +
    1.625
    Amazingly few discotheques provide jukeboxes.
    • +

    Spacing

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SampleVariablepxrem
    +
    + +
    +     		--spacing-054px0.25rem
    +
    + +
    +     		--spacing-18px0.5rem
    +
    + +
    +     		--spacing-216px1rem
    +
    + +
    +     		--spacing-2-0520px1.25rem
    +
    + +
    +     		--spacing-324px1.5rem
    +
    + +
    +     		--spacing-432px2rem
    +
    + +
    +     		--spacing-540px2.5rem
    +
    + +
    +     		--spacing-648px3rem
    +
    + +
    +     		--spacing-756px3.5rem
    +
    + +
    +     		--spacing-864px4rem
    +
    + +
    +     		--spacing-972px4.5rem
    +
    + +
    +     		--spacing-1080px5rem
    +
    + +
    +     		--spacing-15120px7.5rem
    +
    + +
    +     		--spacing-20160px10rem
    + +

    Note: For lines we want to be exactly 1 logical pixel without scaling, we use a 1px value directly.

    + diff --git a/src/stylesheets/dsdl-demo.css b/src/stylesheets/dsdl-demo.css index 1ca623d6..d3b0f2f1 100644 --- a/src/stylesheets/dsdl-demo.css +++ b/src/stylesheets/dsdl-demo.css @@ -1,10 +1,14 @@ /* DSDL demo page */ +.dsdl-demo { + padding-bottom: var(--spacing-10); +} + .dsdl-demo h2, .dsdl-demo h3, .dsdl-demo h4 { - margin-top: 2rem; - margin-bottom: 1rem; + margin-top: var(--spacing-4); + margin-bottom: var(--spacing-2); } .brand-colors h4 { margin-top: 0; @@ -21,7 +25,7 @@ } .brand-colors li, .dsdl-colors ol { - margin: 0 0.5rem 0 0; + margin: 0 var(--spacing-1) 0 0; flex: 1 1 auto; } .brand-colors li:last-child, @@ -29,24 +33,27 @@ margin-right: 0 } .brand-colors li { - padding: 2rem; + padding: var(--spacing-4); text-align: center; } .dsdl-colors li { - padding: 1rem; + padding: var(--spacing-2); text-align: center; } -.dsdl-core-type-matrix th, -.dsdl-core-type-matrix td { - padding: 0.5rem; +.dsdl-demo table { + margin: var(--spacing-2) 0; +} +.dsdl-demo table th, +.dsdl-demo table td { + padding: var(--spacing-1); border: 1px solid var(--dsdl-gray-20); } -.dsdl-core-type-matrix th { +.dsdl-demo table th { background: var(--calitp-brand-blue); color: white; } -.dsdl-core-type-matrix thead th { +.dsdl-demo table thead th { text-align: center; } .dsdl-core-type-matrix td { @@ -56,11 +63,23 @@ .dsdl-type-specs { display: grid; grid-template-columns: auto 1fr; + font-family: var(--dsdl-monospace-font-stack); +} +.dsdl-type-specs dt { + font-weight: 400; } .dsdl-type-specs dd { - margin: 0 0 0 0.5rem; + margin: 0 0 0 var(--spacing-1); } .dsdl-extra-type-styles { list-style: none; padding: 0; } + +.spacing-demo td { + font-family: var(--dsdl-monospace-font-stack); +} +.spacing-sample { + background: var(--calitp-brand-cyan); + width: var(--spacing-20); +} diff --git a/src/stylesheets/dsdl/tokens.css b/src/stylesheets/dsdl/tokens.css index a18482d2..9c91c130 100644 --- a/src/stylesheets/dsdl/tokens.css +++ b/src/stylesheets/dsdl/tokens.css @@ -22,21 +22,22 @@ --dsdl-monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace; /* Size */ - --text-xxs: calc(10rem / 16); - --text-xs: calc(12rem / 16); - --text-s: calc(14rem / 16); - --text-m: calc(16rem / 16); - --text-l: calc(20rem / 16); - --text-xl: calc(24rem / 16); - --text-xxl: calc(32rem / 16); - --text-xxxl: calc(40rem / 16); - --text-display: calc(64rem / 16); + --text-base: 16; + --text-xxs: calc(10 / var(--text-base) * 1rem); + --text-xs: calc(12 / var(--text-base) * 1rem); + --text-s: calc(14 / var(--text-base) * 1rem); + --text-m: calc(16 / var(--text-base) * 1rem); + --text-l: calc(20 / var(--text-base) * 1rem); + --text-xl: calc(24 / var(--text-base) * 1rem); + --text-xxl: calc(32 / var(--text-base) * 1rem); + --text-xxxl: calc(40 / var(--text-base) * 1rem); + --text-display: calc(64 / var(--text-base) * 1rem); /* Line height */ --line-height-extra-tight: 1.125; - --line-height-tight: 1.25; - --line-height-normal: 1.5; - --line-height-loose: 1.625; + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-loose: 1.625; /* Colors */ --dsdl-body-color: var(--dsdl-gray-100); @@ -50,7 +51,28 @@ --dsdl-{{ color.group }}-{{ color.level }}: {{ color.value }}; {% endfor %} - --calitp-brand-blue: var(--dsdl-blue-70); /* #045b86 */ - --calitp-brand-cyan: var(--dsdl-cyan-40); /* #38abd0 */ + --calitp-brand-blue: var(--dsdl-blue-70); /* #045b86 */ + --calitp-brand-cyan: var(--dsdl-cyan-40); /* #38abd0 */ --calitp-brand-yellow: var(--dsdl-yellow-30); /* #febd28 */ } + + +/* SPACING */ + +:root { + --spacing-base: calc(8 / var(--text-base) * 1rem); /* 8px → 0.5rem */ + --spacing-05: calc(var(--spacing-base) * 0.5); /* 0.25rem (4px) */ + --spacing-1: calc(var(--spacing-base) * 1 ); /* 0.5rem (8px) */ + --spacing-2: calc(var(--spacing-base) * 2 ); /* 1rem (16px) */ + --spacing-2-05: calc(var(--spacing-base) * 2.5); /* 1.25rem (20px) */ + --spacing-3: calc(var(--spacing-base) * 3 ); /* 1.5rem (24px) */ + --spacing-4: calc(var(--spacing-base) * 4 ); /* 2rem (32px) */ + --spacing-5: calc(var(--spacing-base) * 5 ); /* 2.5rem (40px) */ + --spacing-6: calc(var(--spacing-base) * 6 ); /* 3rem (48px) */ + --spacing-7: calc(var(--spacing-base) * 7 ); /* 3.5rem (56px) */ + --spacing-8: calc(var(--spacing-base) * 8 ); /* 4rem (64px) */ + --spacing-9: calc(var(--spacing-base) * 9 ); /* 4.5rem (72px) */ + --spacing-10: calc(var(--spacing-base) * 10 ); /* 5rem (80px) */ + --spacing-15: calc(var(--spacing-base) * 15 ); /* 7.5rem (120px) */ + --spacing-20: calc(var(--spacing-base) * 20 ); /* 10rem (160px) */ +}