Skip to content

Commit ecbb971

Browse files
berezinantberezinant
committed
feat: introduced desgin tokens to ui-kit
1 parent f4c8702 commit ecbb971

File tree

9 files changed

+182
-10
lines changed

9 files changed

+182
-10
lines changed

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
33
*/
44

5-
@import 'tabs/styles.scss';
5+
@import 'tabs/styles';

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/styles.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
/*!
22
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
33
*/
4+
@import '../tokens/index';
5+
46
.tabs-section,
57
.platform-hinted > .platform-bookmarks-row {
68
margin-right: -8px;
@@ -24,11 +26,11 @@
2426
}
2527

2628
.platform-hinted > .platform-bookmarks-row {
27-
margin-bottom: 16px;
29+
margin-bottom: var(--size-s3);
2830
}
2931

3032
.no-js .platform-bookmarks-row + .sourceset-dependent-content {
31-
margin-top: 8px;
33+
margin-top: var(--size-s2);
3234
}
3335

3436
.no-js .platform-bookmarks-row + .sourceset-dependent-content:last-of-type {

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/breakpoints.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
5+
$breakpoint-desktop-min: 900px;
6+
$breakpoint-tablet-max: 899px;
7+
$breakpoint-tablet-min: 440px;
8+
$breakpoint-mobile-max: 439px;
9+
$breakpoint-mobile-min: 360px;
10+
11+
:root {
12+
--breakpoint-desktop-min: #{$breakpoint-desktop-min};
13+
--breakpoint-tablet-max: #{$breakpoint-tablet-max};
14+
--breakpoint-tablet-min: #{$breakpoint-tablet-min};
15+
--breakpoint-mobile-max: #{$breakpoint-mobile-max};
16+
--breakpoint-mobile-min: #{$breakpoint-mobile-min};
17+
}

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
:root {
5+
// Interface
6+
--color-key-blue: rgb(48, 127, 255); //#307FFF;
7+
--color-nav-bar: rgb(39, 40, 44);
8+
--color-dark-theme-bg: rgb(38, 38, 40);
9+
10+
// Text colors (headings, paragraphs, labels)
11+
--color-text-black: rgb(0, 0, 0);
12+
--color-text-white: rgba(255, 255, 255, 0.96);
13+
--color-text-light-black: rgba(0, 0, 0, 0.7);
14+
--color-text-light-white: rgba(255, 255, 255, 0.7);
15+
16+
// Generic monochrome
17+
--color-w05: rgba(255, 255, 255, 0.05);
18+
--color-w10: rgba(255, 255, 255, 0.1);
19+
--color-w20: rgba(255, 255, 255, 0.2);
20+
--color-w50: rgba(255, 255, 255, 0.5);
21+
--color-w70: rgba(255, 255, 255, 0.7);
22+
--color-w80: rgba(255, 255, 255, 0.8);
23+
--color-b05: rgba(0, 0, 0, 0.05);
24+
--color-b08: rgba(0, 0, 0, 0.08);
25+
--color-b20: rgba(0, 0, 0, 0.2);
26+
--color-b50: rgba(0, 0, 0, 0.5);
27+
--color-b70: rgba(0, 0, 0, 0.7);
28+
29+
// Code area colors
30+
--color-cd-punctuation: rgb(153, 153, 153); // #999999;
31+
--color-cd-keyword: rgb(0, 51, 179); // #0033B3;
32+
--color-cd-keyword-alternative: rgba(204, 120, 50); // #CC7832;
33+
--color-cd-builtin: rgb(6, 125, 23); // #067D17;
34+
--color-cd-builtin-alternative: rgb(231, 191, 106); // #E8BF6A;
35+
--color-cd-function: rgb(0, 98, 122); // #00627A;
36+
--color-cd-function-alternative: rgb(255, 198, 109); // #FFC66D;
37+
--color-cd-operator: rgb(154, 110, 58); // #9A6E3A;
38+
--color-cd-operator-alternative: rgb(169, 183, 198); // #A9B7C6;
39+
--color-cd-body: rgb(0, 0, 0); // #000000;
40+
--color-cd-body-alternative: rgb(169, 183, 198); // #A9B7C6;
41+
42+
// Targets and source sets
43+
--color-generic: rgb(83, 157, 243);
44+
--color-jvm: rgb(77, 187, 95);
45+
--color-js: rgb(255, 199, 0);
46+
--color-wasm: rgb(255, 255, 255);
47+
}

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/index.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
5+
@import 'breakpoints';
6+
@import 'colors';
7+
@import 'sizes';
8+
@import 'typography';

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/sizes.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
5+
:root {
6+
--size-s1: 4px;
7+
--size-s2: 8px;
8+
--size-s3: 16px;
9+
--size-m1: 24px;
10+
--size-m2: 32px;
11+
--size-m3: 48px;
12+
--size-l1: 64px;
13+
--size-l2: 72px;
14+
--size-ta1: 40px;
15+
--size-ta2: 52px;
16+
}

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
5+
:root {
6+
--font-family-default: JetBrains Sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
7+
Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
8+
--font-family-mono: JetBrains Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
9+
--font-h1: 600 44px/44px var(--font-family-default);
10+
--font-h2: 600 32px/32px var(--font-family-default);
11+
--font-h3: 600 24px/24px var(--font-family-default);
12+
--font-h4: 600 16px/24px var(--font-family-default);
13+
--font-text-m: 400 16px/24px var(--font-family-default);
14+
--font-text-s: 400 13px/24px var(--font-family-default);
15+
--font-code: 400 16px/24px var(--font-family-mono);
16+
}

‎dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css

Lines changed: 72 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,72 @@
1-
/*!
2-
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3-
*/
1+
:root {
2+
--breakpoint-desktop-min: 900px;
3+
--breakpoint-tablet-max: 899px;
4+
--breakpoint-tablet-min: 440px;
5+
--breakpoint-mobile-max: 439px;
6+
--breakpoint-mobile-min: 360px;
7+
}
8+
9+
:root {
10+
--color-key-blue: rgb(48, 127, 255);
11+
--color-nav-bar: rgb(39, 40, 44);
12+
--color-dark-theme-bg: rgb(38, 38, 40);
13+
--color-text-black: rgb(0, 0, 0);
14+
--color-text-white: rgba(255, 255, 255, 0.96);
15+
--color-text-light-black: rgba(0, 0, 0, 0.7);
16+
--color-text-light-white: rgba(255, 255, 255, 0.7);
17+
--color-w05: rgba(255, 255, 255, 0.05);
18+
--color-w10: rgba(255, 255, 255, 0.1);
19+
--color-w20: rgba(255, 255, 255, 0.2);
20+
--color-w50: rgba(255, 255, 255, 0.5);
21+
--color-w70: rgba(255, 255, 255, 0.7);
22+
--color-w80: rgba(255, 255, 255, 0.8);
23+
--color-b05: rgba(0, 0, 0, 0.05);
24+
--color-b08: rgba(0, 0, 0, 0.08);
25+
--color-b20: rgba(0, 0, 0, 0.2);
26+
--color-b50: rgba(0, 0, 0, 0.5);
27+
--color-b70: rgba(0, 0, 0, 0.7);
28+
--color-cd-punctuation: rgb(153, 153, 153);
29+
--color-cd-keyword: rgb(0, 51, 179);
30+
--color-cd-keyword-alternative: rgba(204, 120, 50);
31+
--color-cd-builtin: rgb(6, 125, 23);
32+
--color-cd-builtin-alternative: rgb(231, 191, 106);
33+
--color-cd-function: rgb(0, 98, 122);
34+
--color-cd-function-alternative: rgb(255, 198, 109);
35+
--color-cd-operator: rgb(154, 110, 58);
36+
--color-cd-operator-alternative: rgb(169, 183, 198);
37+
--color-cd-body: rgb(0, 0, 0);
38+
--color-cd-body-alternative: rgb(169, 183, 198);
39+
--color-generic: rgb(83, 157, 243);
40+
--color-jvm: rgb(77, 187, 95);
41+
--color-js: rgb(255, 199, 0);
42+
--color-wasm: rgb(255, 255, 255);
43+
}
44+
45+
:root {
46+
--size-s1: 4px;
47+
--size-s2: 8px;
48+
--size-s3: 16px;
49+
--size-m1: 24px;
50+
--size-m2: 32px;
51+
--size-m3: 48px;
52+
--size-l1: 64px;
53+
--size-l2: 72px;
54+
--size-ta1: 40px;
55+
--size-ta2: 52px;
56+
}
57+
58+
:root {
59+
--font-family-default: JetBrains Sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
60+
--font-family-mono: JetBrains Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
61+
--font-h1: 600 44px/44px var(--font-family-default);
62+
--font-h2: 600 32px/32px var(--font-family-default);
63+
--font-h3: 600 24px/24px var(--font-family-default);
64+
--font-h4: 600 16px/24px var(--font-family-default);
65+
--font-text-m: 400 16px/24px var(--font-family-default);
66+
--font-text-s: 400 13px/24px var(--font-family-default);
67+
--font-code: 400 16px/24px var(--font-family-mono);
68+
}
69+
470
.tabs-section, .platform-hinted > .platform-bookmarks-row {
571
margin-left: -8px;
672
margin-right: -8px;
@@ -19,11 +85,11 @@
1985
}
2086

2187
.platform-hinted > .platform-bookmarks-row {
22-
margin-bottom: 16px;
88+
margin-bottom: var(--size-s3);
2389
}
2490

2591
.no-js .platform-bookmarks-row + .sourceset-dependent-content {
26-
margin-top: 8px;
92+
margin-top: var(--size-s2);
2793
}
2894

2995
.no-js .platform-bookmarks-row + .sourceset-dependent-content:last-of-type {
@@ -55,7 +121,7 @@
55121
}
56122

57123
.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
58-
min-width: 64px;
124+
min-width: var(--size-l1);
59125
background: inherit;
60126
flex: none;
61127
order: 5;

‎dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)