@valtimo/components 0.0.0

package/assets/css/carbon.scss

@@ -0,0 +1,141 @@
+/*!
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '@carbon/styles/scss/themes';
+@use '@carbon/colors';
+
+$lightThemeVariables: (
+  'white': themes.$white,
+  'g10': themes.$g10,
+);
+
+$darkThemeVariables: (
+  'g90': themes.$g90,
+  'g100': themes.$g100,
+);
+
+$lightThemeOverwriteVariables: (
+  // Color 80
+  active-primary: var(--vcds-color-80),
+  active-tertiary: var(--vcds-color-80),
+  // Color 70
+  link-02: var(--vcds-color-70),
+  support-04: var(--vcds-color-70),
+  hover-primary-text: var(--vcds-color-70),
+  link-secondary: var(--vcds-color-70),
+  support-info: var(--vcds-color-70),
+  link-primary-hover: var(--vcds-color-70),
+  // Color 60
+  interactive-01: var(--vcds-color-60),
+  interactive-03: var(--vcds-color-60),
+  interactive-04: var(--vcds-color-60),
+  link-01: var(--vcds-color-60),
+  focus: var(--vcds-color-60),
+  background-brand: var(--vcds-color-60),
+  interactive: var(--vcds-color-60),
+  border-interactive: var(--vcds-color-60),
+  link-primary: var(--vcds-color-60),
+  brand-01: var(--vcds-color-60),
+  brand-03: var(--vcds-color-60),
+  // Color 50
+  inverse-support-04: var(--vcds-color-50),
+  support-info-inverse: var(--vcds-color-50),
+  // Color 40
+  inverse-link: var(--vcds-color-40),
+  link-inverse: var(--vcds-color-40),
+  // Color 20
+  highlight: var(--vcds-color-20)
+);
+
+$darkThemeOverwriteVariables: (
+  // Color 80
+  active-primary: var(--vcds-color-80),
+  active-tertiary: var(--vcds-color-80),
+  highlight: var(--vcds-color-80),
+  // Color 70
+  inverse-support-04: var(--vcds-color-70),
+  support-info-inverse: var(--vcds-color-70),
+  // Color 60
+  interactive-01: var(--vcds-color-60),
+  background-brand: var(--vcds-color-60),
+  brand-01: var(--vcds-color-60),
+  brand-03: var(--vcds-color-60),
+  // Color 50
+  support-04: var(--vcds-color-50),
+  support-info: var(--vcds-color-50),
+  interactive-04: var(--vcds-color-50),
+  interactive: var(--vcds-color-50),
+  border-interactive: var(--vcds-color-50),
+  // Color 40
+  link-01: var(--vcds-color-40),
+  link-primary: var(--vcds-color-40),
+  // Color 30
+  link-02: var(--vcds-color-30),
+  hover-primary-text: var(--vcds-color-30),
+  link-secondary: var(--vcds-color-30),
+  link-primary-hover: var(--vcds-color-30)
+);
+
+@use '@carbon/styles/scss/theme' with (
+  $theme: map-merge(themes.$g10, $lightThemeOverwriteVariables)
+);
+
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens with (
+  $button-primary-active: var(--vcds-color-80),
+  $button-tertiary-active: var(--vcds-color-80),
+  $button-primary-hover: var(--vcds-color-70),
+  $button-tertiary-hover: var(--vcds-color-70),
+  $button-primary: var(--vcds-color-60),
+  $button-tertiary: var(--vcds-color-60)
+);
+
+@use '@carbon/styles';
+@use '@carbon/grid';
+@include grid.flex-grid();
+
+@each $name, $variable in $lightThemeVariables {
+  [data-carbon-theme='#{$name}'] {
+    @include theme.theme($variable, $lightThemeOverwriteVariables);
+  }
+}
+
+@each $name, $variable in $darkThemeVariables {
+  [data-carbon-theme='#{$name}'] {
+    @include theme.theme($variable, $darkThemeOverwriteVariables);
+  }
+}
+
+@import '~node_modules/@carbon/charts-angular/styles.min.css';
+
+/* default Valtimo colors */
+
+:root {
+  --vcds-color-100: #002547;
+  --vcds-color-90: #002c54;
+  --vcds-color-80: #003361;
+  --vcds-color-70: #286198;
+  --vcds-color-60: #2b79bd;
+  --vcds-color-50: #61aedf;
+  --vcds-color-40: #8acff2;
+  --vcds-color-30: #aadcf6;
+  --vcds-color-20: #c9e9f9;
+  --vcds-color-10: #e9f6fd;
+}
+
+.cds--tag--orange {
+  background-color: colors.$orange-40;
+  color: black;
+}

package/assets/css/color.scss

@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+  --vcds-color-100: #12051b; /* Deep purple black */
+  --vcds-color-90: #30123c; /* Very dark violet */
+  --vcds-color-80: #4c2362; /* Dark royal purple */
+  --vcds-color-70: #683589; /* Strong purple */
+  --vcds-color-60: #8546b0; /* Medium bright purple */
+  --vcds-color-50: #a368c0; /* Mid-lavender */
+  --vcds-color-40: #bf8cd0; /* Light lavender */
+  --vcds-color-30: #d4aee0; /* Pale lilac */
+  --vcds-color-20: #e8cfef; /* Light pastel violet */
+  --vcds-color-10: #f7effb; /* Almost white with purple tint */
+}