@atlaskit/tokens 1.2.8 → 1.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/artifacts/theme-import-map.js +6 -1
  3. package/dist/cjs/artifacts/themes/atlassian-dark-iteration.js +13 -0
  4. package/dist/cjs/get-token-value.js +1 -1
  5. package/dist/cjs/get-token.js +1 -1
  6. package/dist/cjs/set-global-theme.js +13 -6
  7. package/dist/cjs/theme-config.js +14 -1
  8. package/dist/cjs/tokens/atlassian-dark-iteration/color/accent.js +70 -0
  9. package/dist/cjs/tokens/atlassian-dark-iteration/color/background.js +102 -0
  10. package/dist/cjs/tokens/atlassian-dark-iteration/color/chart.js +34 -0
  11. package/dist/cjs/tokens/atlassian-dark-iteration/color/icon.js +30 -0
  12. package/dist/cjs/tokens/atlassian-dark-iteration/color/text.js +43 -0
  13. package/dist/cjs/tokens/atlassian-dark-iteration/elevation/shadow.js +45 -0
  14. package/dist/cjs/tokens/atlassian-dark-iteration/elevation/surface.js +48 -0
  15. package/dist/cjs/version.json +1 -1
  16. package/dist/es2019/artifacts/theme-import-map.js +4 -2
  17. package/dist/es2019/artifacts/themes/atlassian-dark-iteration.js +58 -0
  18. package/dist/es2019/get-token-value.js +1 -1
  19. package/dist/es2019/get-token.js +1 -1
  20. package/dist/es2019/set-global-theme.js +7 -0
  21. package/dist/es2019/theme-config.js +12 -0
  22. package/dist/es2019/tokens/atlassian-dark-iteration/color/accent.js +63 -0
  23. package/dist/es2019/tokens/atlassian-dark-iteration/color/background.js +95 -0
  24. package/dist/es2019/tokens/atlassian-dark-iteration/color/chart.js +27 -0
  25. package/dist/es2019/tokens/atlassian-dark-iteration/color/icon.js +23 -0
  26. package/dist/es2019/tokens/atlassian-dark-iteration/color/text.js +36 -0
  27. package/dist/es2019/tokens/atlassian-dark-iteration/elevation/shadow.js +38 -0
  28. package/dist/es2019/tokens/atlassian-dark-iteration/elevation/surface.js +41 -0
  29. package/dist/es2019/version.json +1 -1
  30. package/dist/esm/artifacts/theme-import-map.js +5 -1
  31. package/dist/esm/artifacts/themes/atlassian-dark-iteration.js +6 -0
  32. package/dist/esm/get-token-value.js +1 -1
  33. package/dist/esm/get-token.js +1 -1
  34. package/dist/esm/set-global-theme.js +13 -6
  35. package/dist/esm/theme-config.js +12 -0
  36. package/dist/esm/tokens/atlassian-dark-iteration/color/accent.js +63 -0
  37. package/dist/esm/tokens/atlassian-dark-iteration/color/background.js +95 -0
  38. package/dist/esm/tokens/atlassian-dark-iteration/color/chart.js +27 -0
  39. package/dist/esm/tokens/atlassian-dark-iteration/color/icon.js +23 -0
  40. package/dist/esm/tokens/atlassian-dark-iteration/color/text.js +36 -0
  41. package/dist/esm/tokens/atlassian-dark-iteration/elevation/shadow.js +38 -0
  42. package/dist/esm/tokens/atlassian-dark-iteration/elevation/surface.js +41 -0
  43. package/dist/esm/version.json +1 -1
  44. package/dist/types/artifacts/theme-import-map.d.ts +3 -3
  45. package/dist/types/artifacts/themes/atlassian-dark-iteration.d.ts +7 -0
  46. package/dist/types/theme-config.d.ts +14 -0
  47. package/dist/types/tokens/atlassian-dark-iteration/color/accent.d.ts +4 -0
  48. package/dist/types/tokens/atlassian-dark-iteration/color/background.d.ts +4 -0
  49. package/dist/types/tokens/atlassian-dark-iteration/color/chart.d.ts +4 -0
  50. package/dist/types/tokens/atlassian-dark-iteration/color/icon.d.ts +4 -0
  51. package/dist/types/tokens/atlassian-dark-iteration/color/text.d.ts +4 -0
  52. package/dist/types/tokens/atlassian-dark-iteration/elevation/shadow.d.ts +4 -0
  53. package/dist/types/tokens/atlassian-dark-iteration/elevation/surface.d.ts +4 -0
  54. package/package.json +10 -1
@@ -0,0 +1,27 @@
1
+ var color = {
2
+ color: {
3
+ chart: {
4
+ neutral: {
5
+ hovered: {
6
+ // @ts-ignore new value for DarkNeautral700
7
+ value: '#8C9BAB'
8
+ }
9
+ },
10
+ gray: {
11
+ bold: {
12
+ hovered: {
13
+ // @ts-ignore new value for DarkNeautral700
14
+ value: '#8C9BAB'
15
+ }
16
+ },
17
+ bolder: {
18
+ '[default]': {
19
+ // @ts-ignore new value for DarkNeautral700
20
+ value: '#8C9BAB'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ };
27
+ export default color;
@@ -0,0 +1,23 @@
1
+ var color = {
2
+ color: {
3
+ icon: {
4
+ subtle: {
5
+ // @ts-ignore new value for DarkNeautral700
6
+ value: '#8C9BAB'
7
+ },
8
+ inverse: {
9
+ value: 'DarkNeutral100'
10
+ },
11
+ selected: {
12
+ // @ts-ignore Blue350 not currently available
13
+ value: '#6EAAFF'
14
+ },
15
+ warning: {
16
+ inverse: {
17
+ value: 'DarkNeutral100'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ };
23
+ export default color;
@@ -0,0 +1,36 @@
1
+ var color = {
2
+ color: {
3
+ text: {
4
+ '[default]': {
5
+ value: 'DarkNeutral900'
6
+ },
7
+ subtlest: {
8
+ // @ts-ignore new value for DarkNeautral700
9
+ value: '#8C9BAB'
10
+ },
11
+ inverse: {
12
+ value: 'DarkNeutral100'
13
+ },
14
+ selected: {
15
+ // @ts-ignore Blue350 not currently available
16
+ value: '#6EAAFF'
17
+ },
18
+ warning: {
19
+ inverse: {
20
+ value: 'DarkNeutral100'
21
+ }
22
+ }
23
+ },
24
+ link: {
25
+ '[default]': {
26
+ // @ts-ignore Blue350 not currently available
27
+ value: '#6EAAFF'
28
+ },
29
+ pressed: {
30
+ // @ts-ignore Blue250 not currently available
31
+ value: '#A8CCFF'
32
+ }
33
+ }
34
+ }
35
+ };
36
+ export default color;
@@ -0,0 +1,38 @@
1
+ var shadow = {
2
+ elevation: {
3
+ shadow: {
4
+ overlay: {
5
+ value: [{
6
+ radius: 0,
7
+ spread: 1,
8
+ color: 'DarkNeutral100A',
9
+ offset: {
10
+ x: 0,
11
+ y: 0
12
+ },
13
+ opacity: 0.12,
14
+ inset: true
15
+ }, {
16
+ radius: 12,
17
+ offset: {
18
+ x: 0,
19
+ y: 8
20
+ },
21
+ color: 'DarkNeutral-100A',
22
+ // This opacity overrides the color alpha.
23
+ opacity: 0.36
24
+ }, {
25
+ radius: 1,
26
+ offset: {
27
+ x: 0,
28
+ y: 0
29
+ },
30
+ color: 'DarkNeutral-100A',
31
+ // This opacity overrides the color alpha.
32
+ opacity: 0.5
33
+ }]
34
+ }
35
+ }
36
+ }
37
+ };
38
+ export default shadow;
@@ -0,0 +1,41 @@
1
+ var elevation = {
2
+ elevation: {
3
+ surface: {
4
+ '[default]': {
5
+ '[default]': {
6
+ value: 'DarkNeutral100'
7
+ },
8
+ hovered: {
9
+ value: 'DarkNeutral200'
10
+ },
11
+ pressed: {
12
+ // @ts-ignore DarkNeutral250 not currently available
13
+ value: '#282E33'
14
+ }
15
+ },
16
+ sunken: {
17
+ value: 'DarkNeutral0'
18
+ },
19
+ raised: {
20
+ '[default]': {
21
+ value: 'DarkNeutral200'
22
+ },
23
+ hovered: {
24
+ // @ts-ignore DarkNeutral250 not currently available
25
+ value: '#282E33'
26
+ }
27
+ },
28
+ overlay: {
29
+ '[default]': {
30
+ // @ts-ignore DarkNeutral250 not currently available
31
+ value: '#282E33'
32
+ },
33
+ pressed: {
34
+ // @ts-ignore DarkNeutral350 not currently available
35
+ value: '#38414A'
36
+ }
37
+ }
38
+ }
39
+ }
40
+ };
41
+ export default elevation;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.8",
3
+ "version": "1.2.10",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -6,11 +6,11 @@
6
6
  * This allows users to compose their themes and only use the tokens that are requested.
7
7
  * When a new theme is created, the import should automatically be added to the map
8
8
  *
9
- * @codegen <<SignedSource::ce4463df8e613cb4c4a8b24907ce95ae>>
9
+ * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
10
10
  * @codegenCommand yarn build tokens
11
11
  */
12
- import { ThemeIds } from '../theme-config';
13
- declare const themeImportsMap: Record<ThemeIds, () => Promise<{
12
+ import { ThemeIds, ThemeOverrideIds } from '../theme-config';
13
+ declare const themeImportsMap: Record<ThemeIds | ThemeOverrideIds, () => Promise<{
14
14
  default: string;
15
15
  }>>;
16
16
  export default themeImportsMap;
@@ -0,0 +1,7 @@
1
+ declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n --ds-text: #B6C2CF;\n --ds-text-inverse: #1D2125;\n --ds-text-selected: #6EAAFF;\n --ds-text-warning-inverse: #1D2125;\n --ds-text-subtlest: #8C9BAB;\n --ds-link: #6EAAFF;\n --ds-link-pressed: #A8CCFF;\n --ds-icon-inverse: #1D2125;\n --ds-icon-selected: #6EAAFF;\n --ds-icon-warning-inverse: #1D2125;\n --ds-icon-subtle: #8C9BAB;\n --ds-background-accent-red-subtlest: #4F1C16;\n --ds-background-accent-orange-subtlest: #513010;\n --ds-background-accent-yellow-subtlest: #473602;\n --ds-background-accent-green-subtlest: #143E2C;\n --ds-background-accent-teal-subtlest: #193E42;\n --ds-background-accent-blue-subtlest: #092957;\n --ds-background-accent-purple-subtlest: #2B2451;\n --ds-background-accent-magenta-subtlest: #421F34;\n --ds-background-accent-gray-bolder: #8C9BAB;\n --ds-background-input: #22272B;\n --ds-background-input-hovered: #282E33;\n --ds-background-input-pressed: #22272B;\n --ds-background-selected: #082145;\n --ds-background-selected-pressed: #0055CC;\n --ds-background-danger: #4F1C16;\n --ds-background-danger-pressed: #872518;\n --ds-background-warning: #473602;\n --ds-background-warning-pressed: #6B5103;\n --ds-background-success: #143E2C;\n --ds-background-success-pressed: #1B5A40;\n --ds-background-discovery: #2B2451;\n --ds-background-discovery-pressed: #4A3D8A;\n --ds-background-information: #092957;\n --ds-background-information-pressed: #073A83;\n --ds-blanket: #10121499;\n --ds-chart-neutral-hovered: #8C9BAB;\n --ds-chart-gray-bold-hovered: #8C9BAB;\n --ds-chart-gray-bolder: #8C9BAB;\n --ds-surface: #1D2125;\n --ds-surface-hovered: #22272B;\n --ds-surface-pressed: #282E33;\n --ds-surface-overlay: #282E33;\n --ds-surface-overlay-pressed: #38414A;\n --ds-surface-raised: #22272B;\n --ds-surface-raised-hovered: #282E33;\n --ds-surface-sunken: #161A1D;\n --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F01F, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;\n}\n";
2
+ /**
3
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::337e80050595184e7a6198ba1c75e2fc>>
5
+ * @codegenCommand yarn build tokens
6
+ */
7
+ export default _default;
@@ -8,6 +8,7 @@
8
8
  */
9
9
  export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
10
10
  export declare type ThemeFileNames = Themes;
11
+ export declare type ThemeOverrides = 'atlassian-dark-iteration';
11
12
  /**
12
13
  * Theme kinds: The type of theme.
13
14
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
@@ -31,6 +32,7 @@ export declare type DataColorModes = Omit<ThemeColorModes, 'auto'>;
31
32
  */
32
33
  export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];
33
34
  export declare type ThemeIds = typeof themeIds[number];
35
+ export declare type ThemeOverrideIds = 'dark-iteration';
34
36
  /**
35
37
  * Theme to use a base. This will create the theme as
36
38
  * an extension with all token values marked as optional
@@ -61,4 +63,16 @@ interface ThemeConfig {
61
63
  };
62
64
  }
63
65
  declare const themeConfig: Record<Themes, ThemeConfig>;
66
+ export declare const themeOverrideConfig: {
67
+ 'atlassian-dark-iteration': {
68
+ id: string;
69
+ displayName: string;
70
+ palette: string;
71
+ overrideTheme: string;
72
+ attributes: {
73
+ type: string;
74
+ mode: string;
75
+ };
76
+ };
77
+ };
64
78
  export default themeConfig;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { AccentColorTokenSchema, ExtendedValueSchema } from '../../../types';
3
+ declare const color: ExtendedValueSchema<AccentColorTokenSchema<BaseToken>>;
4
+ export default color;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { BackgroundColorTokenSchema, ExtendedValueSchema } from '../../../types';
3
+ declare const color: ExtendedValueSchema<BackgroundColorTokenSchema<BaseToken>>;
4
+ export default color;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { ChartColorTokenSchema, ExtendedValueSchema } from '../../../types';
3
+ declare const color: ExtendedValueSchema<ChartColorTokenSchema<BaseToken>>;
4
+ export default color;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { ExtendedValueSchema, IconColorTokenSchema } from '../../../types';
3
+ declare const color: ExtendedValueSchema<IconColorTokenSchema<BaseToken>>;
4
+ export default color;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { ExtendedValueSchema, TextColorTokenSchema } from '../../../types';
3
+ declare const color: ExtendedValueSchema<TextColorTokenSchema<BaseToken>>;
4
+ export default color;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { ExtendedValueSchema, ShadowTokenSchema } from '../../../types';
3
+ declare const shadow: ExtendedValueSchema<ShadowTokenSchema<BaseToken>>;
4
+ export default shadow;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { ExtendedValueSchema, SurfaceTokenSchema } from '../../../types';
3
+ declare const elevation: ExtendedValueSchema<SurfaceTokenSchema<BaseToken>>;
4
+ export default elevation;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.8",
3
+ "version": "1.2.10",
4
4
  "author": "Atlassian Pty Ltd",
5
5
  "description": "Design tokens are the single source of truth to name and store design decisions.",
6
6
  "license": "Apache-2.0",
@@ -10,6 +10,9 @@
10
10
  "atlassian": {
11
11
  "team": "Design System Team",
12
12
  "releaseModel": "continuous",
13
+ "productPushConsumption": [
14
+ "jira"
15
+ ],
13
16
  "website": {
14
17
  "name": "Design tokens",
15
18
  "category": "Libraries"
@@ -50,6 +53,7 @@
50
53
  },
51
54
  "dependencies": {
52
55
  "@atlaskit/ds-lib": "^2.1.0",
56
+ "@atlaskit/platform-feature-flags": "^0.1.0",
53
57
  "@babel/runtime": "^7.0.0",
54
58
  "@babel/traverse": "^7.15.0",
55
59
  "@babel/types": "^7.15.0",
@@ -122,6 +126,11 @@
122
126
  ]
123
127
  }
124
128
  },
129
+ "platform-feature-flags": {
130
+ "design-system-team.dark-theme-iteration_dk1ln": {
131
+ "type": "boolean"
132
+ }
133
+ },
125
134
  "homepage": "https://atlassian.design/components/tokens",
126
135
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
127
136
  }