duck-dev-lib 0.0.46 → 0.0.48

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.
@@ -22,46 +22,66 @@ var documentationStyleTabs = {
22
22
  neobrutalism: "Neobrutalism"
23
23
  };
24
24
  var quickStart = {
25
- title: "Duck Dev UI Library — Colors & Themes",
26
- intro: "This guide explains how to install the library styles and work with colors and themes. Duck Dev provides a small set of CSS variables (the dd-base palette) and theme switching via an attribute.",
27
- principles: "Important: always use dd-base variables (var(--dd-base-...)) inside your styles. Raw color values are allowed only in rare edge cases.",
28
- sections: {
29
- install: "Install & connect styles",
30
- palette: "Palette overview",
31
- themeSwitch: "Theme switching (light/dark)",
32
- custom: "Override or create a custom theme",
33
- use: "Use colors in components"
25
+ hero: {
26
+ title: "Duck Dev UI Library",
27
+ subtitle: "A component library for Angular 21 with two visual styles clean Classic and bold Neobrutalism. Built on Signals, CSS variables, and standalone components."
34
28
  },
35
29
  install: {
36
- text: "Add the variables stylesheet to your global styles so components pick up the palette.",
37
- snippet: "/* angular.json */\n\"styles\": [\n \"projects/duck-dev-lib/src/styles/variables.scss\",\n \"src/styles.scss\"\n]"
30
+ title: "Install & connect styles",
31
+ eyebrow: "Setup",
32
+ cardTitle: "Two steps to get started",
33
+ cardText: "Add the variables stylesheet to your global styles and configure Transloco for i18n support. Components will automatically pick up the palette."
38
34
  },
39
35
  palette: {
40
- text: "The base palette is exposed as CSS variables. Use --dd-base-* in your custom CSS. Examples: --dd-base-0/100/200/300/400/500/600 and accents like --dd-base-secondary, --dd-base-accent-orange, --dd-base-accent-blue.",
41
- list: [
42
- "--dd-base-0..600 — neutrals (background/text/border)",
43
- "--dd-base-secondary — violet accent",
44
- "--dd-base-accent-orange — orange accent",
45
- "--dd-base-accent-blue blue accent"
46
- ]
47
- },
48
- themeSwitch: {
49
- text: "Theme is controlled by the ddTheme attribute on any wrapper (commonly on html or body). Supported built-in: light (default) and dark.",
50
- snippet: "<!-- index.html -->\n<html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html>",
51
- indexLabel: "index.html",
52
- indexHtmlTitle: "Add ddTheme on the html tag",
53
- toggleLabel: "Component toggle",
54
- toggleTitle: "Toggle theme via component code",
55
- toggleSnippet: "// In a component\nsetTheme(theme: 'dark' | 'light') {\n document.documentElement.setAttribute('ddTheme', theme);\n}"
36
+ title: "Color palette",
37
+ description: "The entire library uses CSS variables from the dd-base palette. Use --dd-base-* in your custom styles — never hardcode color values.",
38
+ neutralsTitle: "Neutrals",
39
+ accentsTitle: "Accents",
40
+ tipTitle: "Tip:",
41
+ tipText: "Always use var(--dd-base-...) in your styles. Components reference these variables, so your custom theme will propagate everywhere automatically."
42
+ },
43
+ themes: {
44
+ title: "Theme switching",
45
+ lightEyebrow: "Default",
46
+ lightTitle: "Light theme",
47
+ lightText: "Clean backgrounds and dark text. Active by default — no extra setup needed.",
48
+ darkEyebrow: "Alternate",
49
+ darkTitle: "Dark theme",
50
+ darkText: "Inverted contrast for low-light environments. Set ddTheme=\"dark\" on the root element.",
51
+ htmlAccordionTitle: "Set theme via HTML attribute",
52
+ toggleAccordionTitle: "Toggle theme from component code"
56
53
  },
57
54
  custom: {
58
- text: "You can override any dd-base variable under a custom theme. Components will automatically use your values.",
59
- snippet: "/* styles.scss */\n[ddTheme='brand'] {\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n}"
60
- },
61
- use: {
62
- text: "Library components accept AccentEnumColor to pick semantic colors from the palette. Below are examples with buttons and info cards.",
63
- buttonsTitle: "Accent buttons",
64
- cardsTitle: "Info cards"
55
+ title: "Custom themes",
56
+ eyebrow: "Branding",
57
+ cardTitle: "Create your own theme",
58
+ cardText: "Override any dd-base variable under a custom ddTheme attribute. All components will automatically pick up your values."
59
+ },
60
+ colors: {
61
+ title: "Colors in components",
62
+ description: "Library components accept AccentEnumColor to pick semantic colors from the palette. Here are live examples of how the same color system works across different component types.",
63
+ progressTitle: "Progress bars",
64
+ buttonsTitle: "Buttons",
65
+ badgesTitle: "Badges",
66
+ cardsTitle: "Accent cards",
67
+ cardViolet: "Violet accent card — perfect for highlights",
68
+ cardOrange: "Orange accent card — great for warnings",
69
+ cardDark: "Dark accent card — strong contrast"
70
+ },
71
+ styles: {
72
+ title: "Two visual styles",
73
+ description: "Every component family offers Classic and Neobrutalism variants. Switch between tabs to preview the difference.",
74
+ classicCardTitle: "Clean & modern",
75
+ classicCardText: "Subtle gradients, soft shadows, and restrained spacing for polished product interfaces.",
76
+ signalCardTitle: "Data-driven",
77
+ signalCardText: "Grid texture and precise accents for metrics, dashboards, and system communication.",
78
+ neobrutalBubbleText: "thick borders, hard shadows, and intentionally rough geometry for interfaces that need to feel loud and expressive."
79
+ },
80
+ usage: {
81
+ title: "Usage example",
82
+ templateTitle: "Template (HTML)",
83
+ componentTitle: "Component (TypeScript)",
84
+ tip: "All components are standalone — import them directly, no NgModule required. Use AccentEnumColor for consistent colors across the entire interface."
65
85
  }
66
86
  };
67
87
  var tooltipDoc = {
@@ -808,4 +828,4 @@ var en = {
808
828
  };
809
829
 
810
830
  export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, slider, speakerBubbleDoc, svgComponent, tabs, tabsComponent, tooltipDoc };
811
- //# sourceMappingURL=duck-dev-lib-en-VOJz-IcV.mjs.map
831
+ //# sourceMappingURL=duck-dev-lib-en-BXgJr6gM.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"duck-dev-lib-ru-COyomsqL.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"duck-dev-lib-en-BXgJr6gM.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -22,46 +22,66 @@ var documentationStyleTabs = {
22
22
  neobrutalism: "Neobrutalism"
23
23
  };
24
24
  var quickStart = {
25
- title: "Duck Dev UI Library — Цвета и темы",
26
- intro: "Это руководство объясняет, как подключить стили библиотеки и работать с цветами и темами. Duck Dev предоставляет набор CSS‑переменных (палитра dd-base) и переключение тем через атрибут.",
27
- principles: "Важно: внутри своих стилей используйте только переменные dd-base (var(--dd-base-...)). Жёсткие цвета используйте лишь в редких случаях.",
28
- sections: {
29
- install: "Установка и подключение стилей",
30
- palette: "Обзор палитры",
31
- themeSwitch: "Переключение темы (светлая/тёмная)",
32
- custom: "Переопределение или создание своей темы",
33
- use: "Использование цветов в компонентах"
25
+ hero: {
26
+ title: "Duck Dev UI Library",
27
+ subtitle: "Библиотека компонентов для Angular 21 с двумя визуальными стилями — лаконичная Классика и дерзкий Neobrutalism. Построена на Signals, CSS-переменных и standalone-компонентах."
34
28
  },
35
29
  install: {
36
- text: "Добавьте файл с переменными в глобальные стили, чтобы компоненты получили палитру.",
37
- snippet: "/* angular.json */\n\"styles\": [\n \"projects/duck-dev-lib/src/styles/variables.scss\",\n \"src/styles.scss\"\n]"
30
+ title: "Установка и подключение",
31
+ eyebrow: "Настройка",
32
+ cardTitle: "Два шага для старта",
33
+ cardText: "Добавьте файл переменных в глобальные стили и настройте Transloco для поддержки i18n. Компоненты автоматически подхватят палитру."
38
34
  },
39
35
  palette: {
40
- text: "Базовая палитра доступна как CSS‑переменные. В своих стилях используйте --dd-base-*. Примеры: --dd-base-0/100/200/300/400/500/600 и акценты: --dd-base-secondary, --dd-base-accent-orange, --dd-base-accent-blue.",
41
- list: [
42
- "--dd-base-0..600 — нейтральные (фон/текст/границы)",
43
- "--dd-base-secondary — фиолетовый акцент",
44
- "--dd-base-accent-orange — оранжевый акцент",
45
- "--dd-base-accent-blue синий акцент"
46
- ]
47
- },
48
- themeSwitch: {
49
- text: "Тема управляется атрибутом ddTheme на любом контейнере (обычно html или body). Встроенные темы: светлая (по умолчанию) и тёмная.",
50
- snippet: "<!-- index.html -->\n<html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html>",
51
- indexLabel: "index.html",
52
- indexHtmlTitle: "Добавьте ddTheme на тег html",
53
- toggleLabel: "Переключение в компоненте",
54
- toggleTitle: "Переключение темы из кода компонента",
55
- toggleSnippet: "// В компоненте\nsetTheme(theme: 'dark' | 'light') {\n document.documentElement.setAttribute('ddTheme', theme);\n}"
36
+ title: "Цветовая палитра",
37
+ description: "Вся библиотека использует CSS-переменные из палитры dd-base. Используйте --dd-base-* в своих стилях — никогда не хардкодьте цвета.",
38
+ neutralsTitle: "Нейтральные",
39
+ accentsTitle: "Акценты",
40
+ tipTitle: "Совет:",
41
+ tipText: "Всегда используйте var(--dd-base-...) в своих стилях. Компоненты ссылаются на эти переменные, поэтому ваша кастомная тема автоматически распространится везде."
42
+ },
43
+ themes: {
44
+ title: "Переключение тем",
45
+ lightEyebrow: "По умолчанию",
46
+ lightTitle: "Светлая тема",
47
+ lightText: "Чистые фоны и тёмный текст. Активна по умолчанию — дополнительная настройка не нужна.",
48
+ darkEyebrow: "Альтернативная",
49
+ darkTitle: "Тёмная тема",
50
+ darkText: "Инвертированный контраст для работы при слабом освещении. Установите ddTheme=\"dark\" на корневой элемент.",
51
+ htmlAccordionTitle: "Установка темы через HTML-атрибут",
52
+ toggleAccordionTitle: "Переключение темы из кода компонента"
56
53
  },
57
54
  custom: {
58
- text: "Вы можете переопределить любые переменные dd-base внутри своей темы. Компоненты автоматически начнут использовать ваши значения.",
59
- snippet: "/* styles.scss */\n[ddTheme='brand'] {\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n}"
60
- },
61
- use: {
62
- text: "Компоненты библиотеки принимают AccentEnumColor для выбора семантических цветов из палитры. Ниже примеры с кнопками и информационными карточками.",
63
- buttonsTitle: "Акцентные кнопки",
64
- cardsTitle: "Информационные карточки"
55
+ title: "Кастомные темы",
56
+ eyebrow: "Брендинг",
57
+ cardTitle: "Создайте свою тему",
58
+ cardText: "Переопределите любые переменные dd-base под собственным атрибутом ddTheme. Все компоненты автоматически подхватят ваши значения."
59
+ },
60
+ colors: {
61
+ title: "Цвета в компонентах",
62
+ description: "Компоненты библиотеки принимают AccentEnumColor для выбора семантических цветов из палитры. Вот живые примеры того, как единая цветовая система работает в разных типах компонентов.",
63
+ progressTitle: "Прогресс-бары",
64
+ buttonsTitle: "Кнопки",
65
+ badgesTitle: "Бейджи",
66
+ cardsTitle: "Акцентные карточки",
67
+ cardViolet: "Фиолетовая акцентная карточка — для выделения",
68
+ cardOrange: "Оранжевая акцентная карточка — для предупреждений",
69
+ cardDark: "Тёмная акцентная карточка — сильный контраст"
70
+ },
71
+ styles: {
72
+ title: "Два визуальных стиля",
73
+ description: "Каждое семейство компонентов имеет варианты Classic и Neobrutalism. Переключайтесь между вкладками, чтобы увидеть разницу.",
74
+ classicCardTitle: "Чистый и современный",
75
+ classicCardText: "Мягкие градиенты, деликатные тени и сдержанные отступы для аккуратных продуктовых интерфейсов.",
76
+ signalCardTitle: "Data-driven",
77
+ signalCardText: "Текстура сетки и точные акценты для метрик, дашбордов и системной коммуникации.",
78
+ neobrutalBubbleText: "толстые границы, жёсткие тени и нарочито грубая геометрия для интерфейсов, которым нужно звучать громко и выразительно."
79
+ },
80
+ usage: {
81
+ title: "Пример использования",
82
+ templateTitle: "Шаблон (HTML)",
83
+ componentTitle: "Компонент (TypeScript)",
84
+ tip: "Все компоненты standalone — импортируйте их напрямую, NgModule не нужен. Используйте AccentEnumColor для единообразных цветов по всему интерфейсу."
65
85
  }
66
86
  };
67
87
  var notifications = {
@@ -773,4 +793,4 @@ var ru = {
773
793
  };
774
794
 
775
795
  export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, slider, speakerBubbleDoc, svgComponent, tabs, tabsComponent };
776
- //# sourceMappingURL=duck-dev-lib-ru-COyomsqL.mjs.map
796
+ //# sourceMappingURL=duck-dev-lib-ru-BezMvMFU.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"duck-dev-lib-en-VOJz-IcV.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"duck-dev-lib-ru-BezMvMFU.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}