@openwebconcept/design-tokens 1.0.0

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 (15) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/LICENSE.md +5 -0
  3. package/README.md +60 -0
  4. package/dist/_variables.scss +178 -0
  5. package/dist/index.js +189 -0
  6. package/dist/tokens.css +181 -0
  7. package/dist/tokens.json +291 -0
  8. package/package.json +32 -0
  9. package/src/brand/color.tokens.json +21 -0
  10. package/src/brand/typography.tokens.json +27 -0
  11. package/src/components/button.tokens.json +24 -0
  12. package/src/components/nl-button.tokens.json +114 -0
  13. package/src/components/process-steps.tokens.json +312 -0
  14. package/src/focus.tokens.json +15 -0
  15. package/style-dictionary.config.json +52 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,10 @@
1
+ # @openwebconcept/design-tokens
2
+
3
+ ## 1.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 974b14d: Split `@openwebconcept/design-tokens` responsibilities.
8
+ - `@openwebconcept/design-tokens` no longer emits `dist/theme.css` scoped to `.theme-owc`. It now exposes only the root-scoped neutral primitives in `dist/tokens.css` (plus SCSS, JS, and JSON outputs).
9
+ - New `@openwebconcept/theme-owc` package emits the `.theme-owc`-scoped CSS as `dist/index.css`, mirroring the shape of the municipal theme packages.
10
+ - Consumers previously importing `@openwebconcept/design-tokens/dist/theme.css` should switch to `@openwebconcept/theme-owc/dist/index.css`.
package/LICENSE.md ADDED
@@ -0,0 +1,5 @@
1
+ Copyright (c) Open Web Concept
2
+
3
+ This software is released under the MIT License.
4
+
5
+ See the main project LICENSE.md for full license details.
package/README.md ADDED
@@ -0,0 +1,60 @@
1
+ # NL Design System - Shared Design Tokens
2
+
3
+ This package contains shared design tokens that are common across all NL Design System themes.
4
+
5
+ ## Purpose
6
+
7
+ The `@openwebconcept/design-tokens` package extracts common design tokens to:
8
+
9
+ - Reduce duplication across theme packages
10
+ - Ensure consistency in shared design properties
11
+ - Make it easier to update common values in one place
12
+ - Provide a foundation for new themes
13
+
14
+ ## Included Tokens
15
+
16
+ ### Focus Tokens
17
+ - `focus.outline-width`: `2px`
18
+ - `focus.outline-style`: `solid`
19
+ - `focus.outline-offset`: `2px`
20
+
21
+ ### Typography Tokens
22
+ - Font sizes (sm, base, xl) with responsive clamp values
23
+ - Line heights
24
+
25
+ ### Component Tokens
26
+ - Button structural properties (border, padding, font)
27
+
28
+ ## Usage
29
+
30
+ Theme packages should depend on this package and reference its tokens. For example:
31
+
32
+ ```json
33
+ {
34
+ "theme-name": {
35
+ "focus": {
36
+ "outline-color": {
37
+ "value": "{theme-name.color.primary}"
38
+ },
39
+ "outline-width": {
40
+ "value": "{focus.outline-width}"
41
+ },
42
+ "outline-style": {
43
+ "value": "{focus.outline-style}"
44
+ },
45
+ "outline-offset": {
46
+ "value": "{focus.outline-offset}"
47
+ }
48
+ }
49
+ }
50
+ }
51
+ ```
52
+
53
+ ## Development
54
+
55
+ - Run `pnpm build` to build all output formats
56
+ - Run `pnpm watch` to watch for changes and rebuild automatically
57
+
58
+ ## License
59
+
60
+ See LICENSE.md for license information.
package/dist/_variables.scss ADDED
@@ -0,0 +1,178 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $owc-color-primary: #1d70b8;
5
+ $owc-color-secondary: #4d4d4d;
6
+ $owc-color-success: #28a745;
7
+ $owc-color-warning: #ffc107;
8
+ $owc-color-danger: #dc3545;
9
+ $owc-typography-font-family-sans: system-ui, sans-serif;
10
+ $owc-typography-font-size-sm: clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem);
11
+ $owc-typography-font-size-base: clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem);
12
+ $owc-typography-font-size-xl: clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem);
13
+ $owc-typography-line-height-base: 1.75;
14
+ $owc-button-border-width: 1px;
15
+ $owc-button-border-radius: 4px;
16
+ $owc-button-padding-block: .7rem;
17
+ $owc-button-padding-inline: 1.2rem;
18
+ $owc-button-font-size: 16px;
19
+ $owc-button-font-weight: 600;
20
+ $owc-focus-outline-width: 2px;
21
+ $owc-focus-outline-style: solid;
22
+ $owc-focus-outline-offset: 2px;
23
+ $nl-button-default-background-color: transparent;
24
+ $nl-button-default-hover-color: #ffffff;
25
+ $nl-button-default-active-color: #ffffff;
26
+ $nl-button-default-disabled-background-color: transparent;
27
+ $nl-button-default-disabled-border-color: #ced4da;
28
+ $nl-button-default-disabled-color: #6c757d;
29
+ $nl-button-default-focus-color: #ffffff;
30
+ $nl-button-primary-color: #ffffff;
31
+ $nl-button-primary-hover-color: #ffffff;
32
+ $nl-button-primary-active-color: #ffffff;
33
+ $nl-button-primary-disabled-background-color: #ced4da;
34
+ $nl-button-primary-disabled-border-color: #ced4da;
35
+ $nl-button-primary-disabled-color: #6c757d;
36
+ $nl-button-secondary-background-color: transparent;
37
+ $nl-button-secondary-hover-color: #ffffff;
38
+ $nl-button-secondary-active-color: #ffffff;
39
+ $nl-button-secondary-disabled-background-color: transparent;
40
+ $nl-button-secondary-disabled-border-color: #ced4da;
41
+ $nl-button-secondary-disabled-color: #6c757d;
42
+ $nl-button-subtle-background-color: transparent;
43
+ $nl-button-subtle-border-color: transparent;
44
+ $nl-button-subtle-hover-background-color: transparent;
45
+ $nl-button-subtle-hover-border-color: transparent;
46
+ $nl-button-subtle-active-background-color: transparent;
47
+ $nl-button-subtle-active-border-color: transparent;
48
+ $nl-button-subtle-disabled-background-color: transparent;
49
+ $nl-button-subtle-disabled-border-color: transparent;
50
+ $nl-button-subtle-disabled-color: #6c757d;
51
+ $nl-button-focus-color: #ffffff;
52
+ $denhaag-process-steps-line-height: 24px;
53
+ $denhaag-process-steps-step-padding-block-start: 0;
54
+ $denhaag-process-steps-step-padding-block-end: 0;
55
+ $denhaag-process-steps-step-distance: 40px;
56
+ $denhaag-process-steps-sub-step-distance: 12px;
57
+ $denhaag-process-steps-step-content-margin: 12px;
58
+ $denhaag-process-steps-step-header-align-items: center;
59
+ $denhaag-process-steps-step-collapse-icon-size: 16px;
60
+ $denhaag-process-steps-step-collapse-icon-padding: 4px;
61
+ $denhaag-process-steps-step-heading-color: #000000;
62
+ $denhaag-process-steps-step-heading-font-weight: 400;
63
+ $denhaag-process-steps-step-heading-overflow-wrap: anywhere;
64
+ $denhaag-process-steps-step-heading-not-checked-color: #000000;
65
+ $denhaag-process-steps-step-heading-checked-color: #000000;
66
+ $denhaag-process-steps-step-heading-checked-font-weight: 700;
67
+ $denhaag-process-steps-step-heading-current-font-weight: 700;
68
+ $denhaag-process-steps-step-heading-warning-color: #f97316;
69
+ $denhaag-process-steps-step-meta-color: #000000;
70
+ $denhaag-process-steps-step-meta-font-size: 16px;
71
+ $denhaag-process-steps-step-meta-date-color: #000000;
72
+ $denhaag-process-steps-step-meta-nested-font-size: 14px;
73
+ $denhaag-process-steps-step-meta-nested-margin-block-start: 4px;
74
+ $denhaag-process-steps-step-content-color: #ced4da;
75
+ $denhaag-step-marker-size: 32px;
76
+ $denhaag-step-marker-border-width: 2px;
77
+ $denhaag-step-marker-font-weight: 400;
78
+ $denhaag-step-marker-margin: 0;
79
+ $denhaag-step-marker-padding: 12px;
80
+ $denhaag-step-marker-icon-size: 20px;
81
+ $denhaag-step-marker-nested-size: 16px;
82
+ $denhaag-step-marker-nested-icon-size: 10px;
83
+ $denhaag-step-marker-default-background-color: #ced4da;
84
+ $denhaag-step-marker-default-border-color: #ced4da;
85
+ $denhaag-step-marker-default-color: #ffffff;
86
+ $denhaag-step-marker-default-nested-color: #ced4da;
87
+ $denhaag-step-marker-checked-background-color: #ffffff;
88
+ $denhaag-step-marker-current-color: #ffffff;
89
+ $denhaag-step-marker-not-checked-background-color: #ffffff;
90
+ $denhaag-step-marker-not-checked-border-color: #ced4da;
91
+ $denhaag-step-marker-not-checked-color: #000000;
92
+ $denhaag-step-marker-disabled-background-color: #ced4da;
93
+ $denhaag-step-marker-disabled-border-color: #ced4da;
94
+ $denhaag-step-marker-disabled-color: #343a40;
95
+ $denhaag-step-marker-warning-background-color: #f97316;
96
+ $denhaag-step-marker-warning-border-color: #f97316;
97
+ $denhaag-step-marker-warning-color: #ffffff;
98
+ $denhaag-step-marker-warning-nested-background-color: #ffffff;
99
+ $denhaag-step-marker-warning-nested-border-color: #f97316;
100
+ $denhaag-step-marker-error-color: #ffffff;
101
+ $denhaag-step-marker-connector-outline-width: 1px;
102
+ $denhaag-step-marker-connector-default-outline-color: #ced4da;
103
+ $denhaag-step-marker-connector-not-checked-outline-color: #ced4da;
104
+ $denhaag-step-marker-connector-warning-outline-color: #fb923c;
105
+ $utrecht-button-subtle-background-color: transparent;
106
+ $utrecht-button-subtle-color: auto;
107
+ $utrecht-button-padding-block-start: 0;
108
+ $utrecht-button-padding-block-end: 0;
109
+ $utrecht-button-padding-inline-start: 0;
110
+ $utrecht-button-padding-inline-end: 0;
111
+ $utrecht-button-icon-gap: 4px;
112
+ $nl-button-border-radius: $owc-button-border-radius;
113
+ $nl-button-font-family: $owc-typography-font-family-sans;
114
+ $nl-button-padding-block-start: $owc-button-padding-block;
115
+ $nl-button-padding-block-end: $owc-button-padding-block;
116
+ $nl-button-padding-inline-start: $owc-button-padding-inline;
117
+ $nl-button-padding-inline-end: $owc-button-padding-inline;
118
+ $nl-button-default-border-color: $owc-color-primary;
119
+ $nl-button-default-border-width: $owc-button-border-width;
120
+ $nl-button-default-color: $owc-color-primary;
121
+ $nl-button-default-font-size: $owc-button-font-size;
122
+ $nl-button-default-font-weight: $owc-button-font-weight;
123
+ $nl-button-default-hover-background-color: $owc-color-primary;
124
+ $nl-button-default-hover-border-color: $owc-color-primary;
125
+ $nl-button-default-active-background-color: $owc-color-primary;
126
+ $nl-button-default-active-border-color: $owc-color-primary;
127
+ $nl-button-default-focus-background-color: $owc-color-primary;
128
+ $nl-button-default-focus-border-color: $owc-color-primary;
129
+ $nl-button-primary-background-color: $owc-color-primary;
130
+ $nl-button-primary-border-color: $owc-color-primary;
131
+ $nl-button-primary-border-width: $owc-button-border-width;
132
+ $nl-button-primary-font-size: $owc-button-font-size;
133
+ $nl-button-primary-font-weight: $owc-button-font-weight;
134
+ $nl-button-primary-hover-background-color: $owc-color-primary;
135
+ $nl-button-primary-hover-border-color: $owc-color-primary;
136
+ $nl-button-primary-active-background-color: $owc-color-primary;
137
+ $nl-button-primary-active-border-color: $owc-color-primary;
138
+ $nl-button-secondary-border-color: $owc-color-primary;
139
+ $nl-button-secondary-border-width: $owc-button-border-width;
140
+ $nl-button-secondary-color: $owc-color-primary;
141
+ $nl-button-secondary-font-size: $owc-button-font-size;
142
+ $nl-button-secondary-font-weight: $owc-button-font-weight;
143
+ $nl-button-secondary-hover-background-color: $owc-color-primary;
144
+ $nl-button-secondary-hover-border-color: $owc-color-primary;
145
+ $nl-button-secondary-active-background-color: $owc-color-primary;
146
+ $nl-button-secondary-active-border-color: $owc-color-primary;
147
+ $nl-button-subtle-border-width: $owc-button-border-width;
148
+ $nl-button-subtle-color: $owc-color-primary;
149
+ $nl-button-subtle-font-size: $owc-button-font-size;
150
+ $nl-button-subtle-font-weight: $owc-button-font-weight;
151
+ $nl-button-subtle-hover-color: $owc-color-primary;
152
+ $nl-button-subtle-active-color: $owc-color-primary;
153
+ $nl-button-focus-background-color: $owc-color-primary;
154
+ $nl-button-focus-border-color: $owc-color-primary;
155
+ $denhaag-process-steps-font-family: $owc-typography-font-family-sans;
156
+ $denhaag-process-steps-font-size: $owc-typography-font-size-base;
157
+ $denhaag-process-steps-step-heading-font-family: $owc-typography-font-family-sans;
158
+ $denhaag-process-steps-step-heading-font-size: $owc-typography-font-size-xl;
159
+ $denhaag-process-steps-step-heading-line-height: $owc-typography-line-height-base;
160
+ $denhaag-process-steps-step-heading-checked-font-size: $owc-typography-font-size-xl;
161
+ $denhaag-process-steps-step-heading-checked-line-height: $owc-typography-line-height-base;
162
+ $denhaag-process-steps-step-heading-current-color: $owc-color-primary;
163
+ $denhaag-process-steps-step-heading-current-font-size: $owc-typography-font-size-xl;
164
+ $denhaag-process-steps-step-heading-current-line-height: $owc-typography-line-height-base;
165
+ $denhaag-process-steps-step-heading-error-color: $owc-color-danger;
166
+ $denhaag-process-steps-step-meta-date-font-size: $owc-typography-font-size-sm;
167
+ $denhaag-step-marker-font-family: $owc-typography-font-family-sans;
168
+ $denhaag-step-marker-font-size: $owc-typography-font-size-sm;
169
+ $denhaag-step-marker-checked-border-color: $owc-color-primary;
170
+ $denhaag-step-marker-checked-color: $owc-color-primary;
171
+ $denhaag-step-marker-current-background-color: $owc-color-primary;
172
+ $denhaag-step-marker-current-border-color: $owc-color-primary;
173
+ $denhaag-step-marker-current-nested-color: $owc-color-primary;
174
+ $denhaag-step-marker-error-background-color: $owc-color-danger;
175
+ $denhaag-step-marker-error-border-color: $owc-color-danger;
176
+ $denhaag-step-marker-connector-checked-outline-color: $owc-color-primary;
177
+ $denhaag-step-marker-connector-error-outline-color: $owc-color-danger;
178
+ $utrecht-button-subtle-font-size: $owc-typography-font-size-base;
package/dist/index.js ADDED
@@ -0,0 +1,189 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const owcColorPrimary = "#1d70b8";
6
+ export const owcColorSecondary = "#4d4d4d";
7
+ export const owcColorSuccess = "#28a745";
8
+ export const owcColorWarning = "#ffc107";
9
+ export const owcColorDanger = "#dc3545";
10
+ export const owcTypographyFontFamilySans = "system-ui, sans-serif";
11
+ export const owcTypographyFontSizeSm =
12
+ "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)";
13
+ export const owcTypographyFontSizeBase =
14
+ "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)";
15
+ export const owcTypographyFontSizeXl =
16
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
17
+ export const owcTypographyLineHeightBase = "1.75";
18
+ export const owcButtonBorderWidth = "1px";
19
+ export const owcButtonBorderRadius = "4px";
20
+ export const owcButtonPaddingBlock = ".7rem";
21
+ export const owcButtonPaddingInline = "1.2rem";
22
+ export const owcButtonFontSize = "16px";
23
+ export const owcButtonFontWeight = "600";
24
+ export const owcFocusOutlineWidth = "2px";
25
+ export const owcFocusOutlineStyle = "solid";
26
+ export const owcFocusOutlineOffset = "2px";
27
+ export const nlButtonBorderRadius = "4px";
28
+ export const nlButtonFontFamily = "system-ui, sans-serif";
29
+ export const nlButtonPaddingBlockStart = ".7rem";
30
+ export const nlButtonPaddingBlockEnd = ".7rem";
31
+ export const nlButtonPaddingInlineStart = "1.2rem";
32
+ export const nlButtonPaddingInlineEnd = "1.2rem";
33
+ export const nlButtonDefaultBackgroundColor = "transparent";
34
+ export const nlButtonDefaultBorderColor = "#1d70b8";
35
+ export const nlButtonDefaultBorderWidth = "1px";
36
+ export const nlButtonDefaultColor = "#1d70b8";
37
+ export const nlButtonDefaultFontSize = "16px";
38
+ export const nlButtonDefaultFontWeight = "600";
39
+ export const nlButtonDefaultHoverBackgroundColor = "#1d70b8";
40
+ export const nlButtonDefaultHoverBorderColor = "#1d70b8";
41
+ export const nlButtonDefaultHoverColor = "#ffffff";
42
+ export const nlButtonDefaultActiveBackgroundColor = "#1d70b8";
43
+ export const nlButtonDefaultActiveBorderColor = "#1d70b8";
44
+ export const nlButtonDefaultActiveColor = "#ffffff";
45
+ export const nlButtonDefaultDisabledBackgroundColor = "transparent";
46
+ export const nlButtonDefaultDisabledBorderColor = "#ced4da";
47
+ export const nlButtonDefaultDisabledColor = "#6c757d";
48
+ export const nlButtonDefaultFocusBackgroundColor = "#1d70b8";
49
+ export const nlButtonDefaultFocusBorderColor = "#1d70b8";
50
+ export const nlButtonDefaultFocusColor = "#ffffff";
51
+ export const nlButtonPrimaryBackgroundColor = "#1d70b8";
52
+ export const nlButtonPrimaryBorderColor = "#1d70b8";
53
+ export const nlButtonPrimaryBorderWidth = "1px";
54
+ export const nlButtonPrimaryColor = "#ffffff";
55
+ export const nlButtonPrimaryFontSize = "16px";
56
+ export const nlButtonPrimaryFontWeight = "600";
57
+ export const nlButtonPrimaryHoverBackgroundColor = "#1d70b8";
58
+ export const nlButtonPrimaryHoverBorderColor = "#1d70b8";
59
+ export const nlButtonPrimaryHoverColor = "#ffffff";
60
+ export const nlButtonPrimaryActiveBackgroundColor = "#1d70b8";
61
+ export const nlButtonPrimaryActiveBorderColor = "#1d70b8";
62
+ export const nlButtonPrimaryActiveColor = "#ffffff";
63
+ export const nlButtonPrimaryDisabledBackgroundColor = "#ced4da";
64
+ export const nlButtonPrimaryDisabledBorderColor = "#ced4da";
65
+ export const nlButtonPrimaryDisabledColor = "#6c757d";
66
+ export const nlButtonSecondaryBackgroundColor = "transparent";
67
+ export const nlButtonSecondaryBorderColor = "#1d70b8";
68
+ export const nlButtonSecondaryBorderWidth = "1px";
69
+ export const nlButtonSecondaryColor = "#1d70b8";
70
+ export const nlButtonSecondaryFontSize = "16px";
71
+ export const nlButtonSecondaryFontWeight = "600";
72
+ export const nlButtonSecondaryHoverBackgroundColor = "#1d70b8";
73
+ export const nlButtonSecondaryHoverBorderColor = "#1d70b8";
74
+ export const nlButtonSecondaryHoverColor = "#ffffff";
75
+ export const nlButtonSecondaryActiveBackgroundColor = "#1d70b8";
76
+ export const nlButtonSecondaryActiveBorderColor = "#1d70b8";
77
+ export const nlButtonSecondaryActiveColor = "#ffffff";
78
+ export const nlButtonSecondaryDisabledBackgroundColor = "transparent";
79
+ export const nlButtonSecondaryDisabledBorderColor = "#ced4da";
80
+ export const nlButtonSecondaryDisabledColor = "#6c757d";
81
+ export const nlButtonSubtleBackgroundColor = "transparent";
82
+ export const nlButtonSubtleBorderColor = "transparent";
83
+ export const nlButtonSubtleBorderWidth = "1px";
84
+ export const nlButtonSubtleColor = "#1d70b8";
85
+ export const nlButtonSubtleFontSize = "16px";
86
+ export const nlButtonSubtleFontWeight = "600";
87
+ export const nlButtonSubtleHoverBackgroundColor = "transparent";
88
+ export const nlButtonSubtleHoverBorderColor = "transparent";
89
+ export const nlButtonSubtleHoverColor = "#1d70b8";
90
+ export const nlButtonSubtleActiveBackgroundColor = "transparent";
91
+ export const nlButtonSubtleActiveBorderColor = "transparent";
92
+ export const nlButtonSubtleActiveColor = "#1d70b8";
93
+ export const nlButtonSubtleDisabledBackgroundColor = "transparent";
94
+ export const nlButtonSubtleDisabledBorderColor = "transparent";
95
+ export const nlButtonSubtleDisabledColor = "#6c757d";
96
+ export const nlButtonFocusBackgroundColor = "#1d70b8";
97
+ export const nlButtonFocusBorderColor = "#1d70b8";
98
+ export const nlButtonFocusColor = "#ffffff";
99
+ export const denhaagProcessStepsFontFamily = "system-ui, sans-serif";
100
+ export const denhaagProcessStepsFontSize =
101
+ "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)";
102
+ export const denhaagProcessStepsLineHeight = "24px";
103
+ export const denhaagProcessStepsStepPaddingBlockStart = "0";
104
+ export const denhaagProcessStepsStepPaddingBlockEnd = "0";
105
+ export const denhaagProcessStepsStepDistance = "40px";
106
+ export const denhaagProcessStepsSubStepDistance = "12px";
107
+ export const denhaagProcessStepsStepContentMargin = "12px";
108
+ export const denhaagProcessStepsStepHeaderAlignItems = "center";
109
+ export const denhaagProcessStepsStepCollapseIconSize = "16px";
110
+ export const denhaagProcessStepsStepCollapseIconPadding = "4px";
111
+ export const denhaagProcessStepsStepHeadingColor = "#000000";
112
+ export const denhaagProcessStepsStepHeadingFontFamily = "system-ui, sans-serif";
113
+ export const denhaagProcessStepsStepHeadingFontSize =
114
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
115
+ export const denhaagProcessStepsStepHeadingFontWeight = "400";
116
+ export const denhaagProcessStepsStepHeadingLineHeight = "1.75";
117
+ export const denhaagProcessStepsStepHeadingOverflowWrap = "anywhere";
118
+ export const denhaagProcessStepsStepHeadingNotCheckedColor = "#000000";
119
+ export const denhaagProcessStepsStepHeadingCheckedColor = "#000000";
120
+ export const denhaagProcessStepsStepHeadingCheckedFontSize =
121
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
122
+ export const denhaagProcessStepsStepHeadingCheckedFontWeight = "700";
123
+ export const denhaagProcessStepsStepHeadingCheckedLineHeight = "1.75";
124
+ export const denhaagProcessStepsStepHeadingCurrentColor = "#1d70b8";
125
+ export const denhaagProcessStepsStepHeadingCurrentFontSize =
126
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
127
+ export const denhaagProcessStepsStepHeadingCurrentFontWeight = "700";
128
+ export const denhaagProcessStepsStepHeadingCurrentLineHeight = "1.75";
129
+ export const denhaagProcessStepsStepHeadingWarningColor = "#f97316";
130
+ export const denhaagProcessStepsStepHeadingErrorColor = "#dc3545";
131
+ export const denhaagProcessStepsStepMetaColor = "#000000";
132
+ export const denhaagProcessStepsStepMetaFontSize = "16px";
133
+ export const denhaagProcessStepsStepMetaDateColor = "#000000";
134
+ export const denhaagProcessStepsStepMetaDateFontSize =
135
+ "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)";
136
+ export const denhaagProcessStepsStepMetaNestedFontSize = "14px";
137
+ export const denhaagProcessStepsStepMetaNestedMarginBlockStart = "4px";
138
+ export const denhaagProcessStepsStepContentColor = "#ced4da";
139
+ export const denhaagStepMarkerSize = "32px";
140
+ export const denhaagStepMarkerBorderWidth = "2px";
141
+ export const denhaagStepMarkerFontWeight = "400";
142
+ export const denhaagStepMarkerMargin = "0";
143
+ export const denhaagStepMarkerPadding = "12px";
144
+ export const denhaagStepMarkerIconSize = "20px";
145
+ export const denhaagStepMarkerNestedSize = "16px";
146
+ export const denhaagStepMarkerNestedIconSize = "10px";
147
+ export const denhaagStepMarkerFontFamily = "system-ui, sans-serif";
148
+ export const denhaagStepMarkerFontSize =
149
+ "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)";
150
+ export const denhaagStepMarkerDefaultBackgroundColor = "#ced4da";
151
+ export const denhaagStepMarkerDefaultBorderColor = "#ced4da";
152
+ export const denhaagStepMarkerDefaultColor = "#ffffff";
153
+ export const denhaagStepMarkerDefaultNestedColor = "#ced4da";
154
+ export const denhaagStepMarkerCheckedBackgroundColor = "#ffffff";
155
+ export const denhaagStepMarkerCheckedBorderColor = "#1d70b8";
156
+ export const denhaagStepMarkerCheckedColor = "#1d70b8";
157
+ export const denhaagStepMarkerCurrentBackgroundColor = "#1d70b8";
158
+ export const denhaagStepMarkerCurrentBorderColor = "#1d70b8";
159
+ export const denhaagStepMarkerCurrentColor = "#ffffff";
160
+ export const denhaagStepMarkerCurrentNestedColor = "#1d70b8";
161
+ export const denhaagStepMarkerNotCheckedBackgroundColor = "#ffffff";
162
+ export const denhaagStepMarkerNotCheckedBorderColor = "#ced4da";
163
+ export const denhaagStepMarkerNotCheckedColor = "#000000";
164
+ export const denhaagStepMarkerDisabledBackgroundColor = "#ced4da";
165
+ export const denhaagStepMarkerDisabledBorderColor = "#ced4da";
166
+ export const denhaagStepMarkerDisabledColor = "#343a40";
167
+ export const denhaagStepMarkerWarningBackgroundColor = "#f97316";
168
+ export const denhaagStepMarkerWarningBorderColor = "#f97316";
169
+ export const denhaagStepMarkerWarningColor = "#ffffff";
170
+ export const denhaagStepMarkerWarningNestedBackgroundColor = "#ffffff";
171
+ export const denhaagStepMarkerWarningNestedBorderColor = "#f97316";
172
+ export const denhaagStepMarkerErrorBackgroundColor = "#dc3545";
173
+ export const denhaagStepMarkerErrorBorderColor = "#dc3545";
174
+ export const denhaagStepMarkerErrorColor = "#ffffff";
175
+ export const denhaagStepMarkerConnectorOutlineWidth = "1px";
176
+ export const denhaagStepMarkerConnectorDefaultOutlineColor = "#ced4da";
177
+ export const denhaagStepMarkerConnectorNotCheckedOutlineColor = "#ced4da";
178
+ export const denhaagStepMarkerConnectorCheckedOutlineColor = "#1d70b8";
179
+ export const denhaagStepMarkerConnectorWarningOutlineColor = "#fb923c";
180
+ export const denhaagStepMarkerConnectorErrorOutlineColor = "#dc3545";
181
+ export const utrechtButtonSubtleBackgroundColor = "transparent";
182
+ export const utrechtButtonSubtleColor = "auto";
183
+ export const utrechtButtonSubtleFontSize =
184
+ "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)";
185
+ export const utrechtButtonPaddingBlockStart = "0";
186
+ export const utrechtButtonPaddingBlockEnd = "0";
187
+ export const utrechtButtonPaddingInlineStart = "0";
188
+ export const utrechtButtonPaddingInlineEnd = "0";
189
+ export const utrechtButtonIconGap = "4px";
package/dist/tokens.css ADDED
@@ -0,0 +1,181 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --owc-color-primary: #1d70b8;
7
+ --owc-color-secondary: #4d4d4d;
8
+ --owc-color-success: #28a745;
9
+ --owc-color-warning: #ffc107;
10
+ --owc-color-danger: #dc3545;
11
+ --owc-typography-font-family-sans: system-ui, sans-serif;
12
+ --owc-typography-font-size-sm: clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem);
13
+ --owc-typography-font-size-base: clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem);
14
+ --owc-typography-font-size-xl: clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem);
15
+ --owc-typography-line-height-base: 1.75;
16
+ --owc-button-border-width: 1px;
17
+ --owc-button-border-radius: 4px;
18
+ --owc-button-padding-block: .7rem;
19
+ --owc-button-padding-inline: 1.2rem;
20
+ --owc-button-font-size: 16px;
21
+ --owc-button-font-weight: 600;
22
+ --owc-focus-outline-width: 2px;
23
+ --owc-focus-outline-style: solid;
24
+ --owc-focus-outline-offset: 2px;
25
+ --nl-button-default-background-color: transparent;
26
+ --nl-button-default-hover-color: #ffffff;
27
+ --nl-button-default-active-color: #ffffff;
28
+ --nl-button-default-disabled-background-color: transparent;
29
+ --nl-button-default-disabled-border-color: #ced4da;
30
+ --nl-button-default-disabled-color: #6c757d;
31
+ --nl-button-default-focus-color: #ffffff;
32
+ --nl-button-primary-color: #ffffff;
33
+ --nl-button-primary-hover-color: #ffffff;
34
+ --nl-button-primary-active-color: #ffffff;
35
+ --nl-button-primary-disabled-background-color: #ced4da;
36
+ --nl-button-primary-disabled-border-color: #ced4da;
37
+ --nl-button-primary-disabled-color: #6c757d;
38
+ --nl-button-secondary-background-color: transparent;
39
+ --nl-button-secondary-hover-color: #ffffff;
40
+ --nl-button-secondary-active-color: #ffffff;
41
+ --nl-button-secondary-disabled-background-color: transparent;
42
+ --nl-button-secondary-disabled-border-color: #ced4da;
43
+ --nl-button-secondary-disabled-color: #6c757d;
44
+ --nl-button-subtle-background-color: transparent;
45
+ --nl-button-subtle-border-color: transparent;
46
+ --nl-button-subtle-hover-background-color: transparent;
47
+ --nl-button-subtle-hover-border-color: transparent;
48
+ --nl-button-subtle-active-background-color: transparent;
49
+ --nl-button-subtle-active-border-color: transparent;
50
+ --nl-button-subtle-disabled-background-color: transparent;
51
+ --nl-button-subtle-disabled-border-color: transparent;
52
+ --nl-button-subtle-disabled-color: #6c757d;
53
+ --nl-button-focus-color: #ffffff;
54
+ --denhaag-process-steps-line-height: 24px;
55
+ --denhaag-process-steps-step-padding-block-start: 0;
56
+ --denhaag-process-steps-step-padding-block-end: 0;
57
+ --denhaag-process-steps-step-distance: 40px;
58
+ --denhaag-process-steps-sub-step-distance: 12px;
59
+ --denhaag-process-steps-step-content-margin: 12px;
60
+ --denhaag-process-steps-step-header-align-items: center;
61
+ --denhaag-process-steps-step-collapse-icon-size: 16px;
62
+ --denhaag-process-steps-step-collapse-icon-padding: 4px;
63
+ --denhaag-process-steps-step-heading-color: #000000;
64
+ --denhaag-process-steps-step-heading-font-weight: 400;
65
+ --denhaag-process-steps-step-heading-overflow-wrap: anywhere;
66
+ --denhaag-process-steps-step-heading-not-checked-color: #000000;
67
+ --denhaag-process-steps-step-heading-checked-color: #000000;
68
+ --denhaag-process-steps-step-heading-checked-font-weight: 700;
69
+ --denhaag-process-steps-step-heading-current-font-weight: 700;
70
+ --denhaag-process-steps-step-heading-warning-color: #f97316;
71
+ --denhaag-process-steps-step-meta-color: #000000;
72
+ --denhaag-process-steps-step-meta-font-size: 16px;
73
+ --denhaag-process-steps-step-meta-date-color: #000000;
74
+ --denhaag-process-steps-step-meta-nested-font-size: 14px;
75
+ --denhaag-process-steps-step-meta-nested-margin-block-start: 4px;
76
+ --denhaag-process-steps-step-content-color: #ced4da;
77
+ --denhaag-step-marker-size: 32px;
78
+ --denhaag-step-marker-border-width: 2px;
79
+ --denhaag-step-marker-font-weight: 400;
80
+ --denhaag-step-marker-margin: 0;
81
+ --denhaag-step-marker-padding: 12px;
82
+ --denhaag-step-marker-icon-size: 20px;
83
+ --denhaag-step-marker-nested-size: 16px;
84
+ --denhaag-step-marker-nested-icon-size: 10px;
85
+ --denhaag-step-marker-default-background-color: #ced4da;
86
+ --denhaag-step-marker-default-border-color: #ced4da;
87
+ --denhaag-step-marker-default-color: #ffffff;
88
+ --denhaag-step-marker-default-nested-color: #ced4da;
89
+ --denhaag-step-marker-checked-background-color: #ffffff;
90
+ --denhaag-step-marker-current-color: #ffffff;
91
+ --denhaag-step-marker-not-checked-background-color: #ffffff;
92
+ --denhaag-step-marker-not-checked-border-color: #ced4da;
93
+ --denhaag-step-marker-not-checked-color: #000000;
94
+ --denhaag-step-marker-disabled-background-color: #ced4da;
95
+ --denhaag-step-marker-disabled-border-color: #ced4da;
96
+ --denhaag-step-marker-disabled-color: #343a40;
97
+ --denhaag-step-marker-warning-background-color: #f97316;
98
+ --denhaag-step-marker-warning-border-color: #f97316;
99
+ --denhaag-step-marker-warning-color: #ffffff;
100
+ --denhaag-step-marker-warning-nested-background-color: #ffffff;
101
+ --denhaag-step-marker-warning-nested-border-color: #f97316;
102
+ --denhaag-step-marker-error-color: #ffffff;
103
+ --denhaag-step-marker-connector-outline-width: 1px;
104
+ --denhaag-step-marker-connector-default-outline-color: #ced4da;
105
+ --denhaag-step-marker-connector-not-checked-outline-color: #ced4da;
106
+ --denhaag-step-marker-connector-warning-outline-color: #fb923c;
107
+ --utrecht-button-subtle-background-color: transparent;
108
+ --utrecht-button-subtle-color: auto;
109
+ --utrecht-button-padding-block-start: 0;
110
+ --utrecht-button-padding-block-end: 0;
111
+ --utrecht-button-padding-inline-start: 0;
112
+ --utrecht-button-padding-inline-end: 0;
113
+ --utrecht-button-icon-gap: 4px;
114
+ --nl-button-border-radius: var(--owc-button-border-radius);
115
+ --nl-button-font-family: var(--owc-typography-font-family-sans);
116
+ --nl-button-padding-block-start: var(--owc-button-padding-block);
117
+ --nl-button-padding-block-end: var(--owc-button-padding-block);
118
+ --nl-button-padding-inline-start: var(--owc-button-padding-inline);
119
+ --nl-button-padding-inline-end: var(--owc-button-padding-inline);
120
+ --nl-button-default-border-color: var(--owc-color-primary);
121
+ --nl-button-default-border-width: var(--owc-button-border-width);
122
+ --nl-button-default-color: var(--owc-color-primary);
123
+ --nl-button-default-font-size: var(--owc-button-font-size);
124
+ --nl-button-default-font-weight: var(--owc-button-font-weight);
125
+ --nl-button-default-hover-background-color: var(--owc-color-primary);
126
+ --nl-button-default-hover-border-color: var(--owc-color-primary);
127
+ --nl-button-default-active-background-color: var(--owc-color-primary);
128
+ --nl-button-default-active-border-color: var(--owc-color-primary);
129
+ --nl-button-default-focus-background-color: var(--owc-color-primary);
130
+ --nl-button-default-focus-border-color: var(--owc-color-primary);
131
+ --nl-button-primary-background-color: var(--owc-color-primary);
132
+ --nl-button-primary-border-color: var(--owc-color-primary);
133
+ --nl-button-primary-border-width: var(--owc-button-border-width);
134
+ --nl-button-primary-font-size: var(--owc-button-font-size);
135
+ --nl-button-primary-font-weight: var(--owc-button-font-weight);
136
+ --nl-button-primary-hover-background-color: var(--owc-color-primary);
137
+ --nl-button-primary-hover-border-color: var(--owc-color-primary);
138
+ --nl-button-primary-active-background-color: var(--owc-color-primary);
139
+ --nl-button-primary-active-border-color: var(--owc-color-primary);
140
+ --nl-button-secondary-border-color: var(--owc-color-primary);
141
+ --nl-button-secondary-border-width: var(--owc-button-border-width);
142
+ --nl-button-secondary-color: var(--owc-color-primary);
143
+ --nl-button-secondary-font-size: var(--owc-button-font-size);
144
+ --nl-button-secondary-font-weight: var(--owc-button-font-weight);
145
+ --nl-button-secondary-hover-background-color: var(--owc-color-primary);
146
+ --nl-button-secondary-hover-border-color: var(--owc-color-primary);
147
+ --nl-button-secondary-active-background-color: var(--owc-color-primary);
148
+ --nl-button-secondary-active-border-color: var(--owc-color-primary);
149
+ --nl-button-subtle-border-width: var(--owc-button-border-width);
150
+ --nl-button-subtle-color: var(--owc-color-primary);
151
+ --nl-button-subtle-font-size: var(--owc-button-font-size);
152
+ --nl-button-subtle-font-weight: var(--owc-button-font-weight);
153
+ --nl-button-subtle-hover-color: var(--owc-color-primary);
154
+ --nl-button-subtle-active-color: var(--owc-color-primary);
155
+ --nl-button-focus-background-color: var(--owc-color-primary);
156
+ --nl-button-focus-border-color: var(--owc-color-primary);
157
+ --denhaag-process-steps-font-family: var(--owc-typography-font-family-sans);
158
+ --denhaag-process-steps-font-size: var(--owc-typography-font-size-base);
159
+ --denhaag-process-steps-step-heading-font-family: var(--owc-typography-font-family-sans);
160
+ --denhaag-process-steps-step-heading-font-size: var(--owc-typography-font-size-xl);
161
+ --denhaag-process-steps-step-heading-line-height: var(--owc-typography-line-height-base);
162
+ --denhaag-process-steps-step-heading-checked-font-size: var(--owc-typography-font-size-xl);
163
+ --denhaag-process-steps-step-heading-checked-line-height: var(--owc-typography-line-height-base);
164
+ --denhaag-process-steps-step-heading-current-color: var(--owc-color-primary);
165
+ --denhaag-process-steps-step-heading-current-font-size: var(--owc-typography-font-size-xl);
166
+ --denhaag-process-steps-step-heading-current-line-height: var(--owc-typography-line-height-base);
167
+ --denhaag-process-steps-step-heading-error-color: var(--owc-color-danger);
168
+ --denhaag-process-steps-step-meta-date-font-size: var(--owc-typography-font-size-sm);
169
+ --denhaag-step-marker-font-family: var(--owc-typography-font-family-sans);
170
+ --denhaag-step-marker-font-size: var(--owc-typography-font-size-sm);
171
+ --denhaag-step-marker-checked-border-color: var(--owc-color-primary);
172
+ --denhaag-step-marker-checked-color: var(--owc-color-primary);
173
+ --denhaag-step-marker-current-background-color: var(--owc-color-primary);
174
+ --denhaag-step-marker-current-border-color: var(--owc-color-primary);
175
+ --denhaag-step-marker-current-nested-color: var(--owc-color-primary);
176
+ --denhaag-step-marker-error-background-color: var(--owc-color-danger);
177
+ --denhaag-step-marker-error-border-color: var(--owc-color-danger);
178
+ --denhaag-step-marker-connector-checked-outline-color: var(--owc-color-primary);
179
+ --denhaag-step-marker-connector-error-outline-color: var(--owc-color-danger);
180
+ --utrecht-button-subtle-font-size: var(--owc-typography-font-size-base);
181
+ }