yudu-component-kit 0.0.1

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 (20) hide show
  1. package/README.md +63 -0
  2. package/fesm2022/yudu-component-kit.mjs +50 -0
  3. package/fesm2022/yudu-component-kit.mjs.map +1 -0
  4. package/index.d.ts +23 -0
  5. package/package.json +23 -0
  6. package/src/lib/styles/classes/_index_classes.scss +9 -0
  7. package/src/lib/styles/classes/global.scss +27 -0
  8. package/src/lib/styles/classes/yd-button.scss +127 -0
  9. package/src/lib/styles/classes/yd-font.scss +103 -0
  10. package/src/lib/styles/classes/yd-helpers.scss +30 -0
  11. package/src/lib/styles/index.design-system.scss +7 -0
  12. package/src/lib/styles/themes/_dark.theme.scss +125 -0
  13. package/src/lib/styles/themes/_index_themes.scss +2 -0
  14. package/src/lib/styles/themes/_light.theme.scss +125 -0
  15. package/src/lib/styles/tokens/_font.tokens.scss +15 -0
  16. package/src/lib/styles/tokens/_index_tokens.scss +2 -0
  17. package/src/lib/styles/tokens/_sizes-spacing.tokens.scss +24 -0
  18. package/src/lib/styles/variables/_colors.variables.scss +51 -0
  19. package/src/lib/styles/variables/_index_variables.scss +2 -0
  20. package/src/lib/styles/variables/_sizes.variables.scss +28 -0
package/README.md ADDED
@@ -0,0 +1,63 @@
1
+ # YuduComponentKit
2
+
3
+ This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
4
+
5
+ ## Code scaffolding
6
+
7
+ Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
8
+
9
+ ```bash
10
+ ng generate component component-name
11
+ ```
12
+
13
+ For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
14
+
15
+ ```bash
16
+ ng generate --help
17
+ ```
18
+
19
+ ## Building
20
+
21
+ To build the library, run:
22
+
23
+ ```bash
24
+ ng build yudu-component-kit
25
+ ```
26
+
27
+ This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
28
+
29
+ ### Publishing the Library
30
+
31
+ Once the project is built, you can publish your library by following these steps:
32
+
33
+ 1. Navigate to the `dist` directory:
34
+ ```bash
35
+ cd dist/yudu-component-kit
36
+ ```
37
+
38
+ 2. Run the `npm publish` command to publish your library to the npm registry:
39
+ ```bash
40
+ npm publish
41
+ ```
42
+
43
+ ## Running unit tests
44
+
45
+ To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
46
+
47
+ ```bash
48
+ ng test
49
+ ```
50
+
51
+ ## Running end-to-end tests
52
+
53
+ For end-to-end (e2e) testing, run:
54
+
55
+ ```bash
56
+ ng e2e
57
+ ```
58
+
59
+ Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
60
+
61
+ ## Additional Resources
62
+
63
+ For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
package/fesm2022/yudu-component-kit.mjs ADDED
@@ -0,0 +1,50 @@
1
+ import { NgClass } from '@angular/common';
2
+ import * as i0 from '@angular/core';
3
+ import { input, ViewEncapsulation, Component } from '@angular/core';
4
+
5
+ var YdBtnSize;
6
+ (function (YdBtnSize) {
7
+ YdBtnSize["small"] = "small";
8
+ YdBtnSize["normal"] = "normal";
9
+ YdBtnSize["large"] = "large";
10
+ })(YdBtnSize || (YdBtnSize = {}));
11
+ ;
12
+ var YdBtnStyle;
13
+ (function (YdBtnStyle) {
14
+ YdBtnStyle["primary"] = "primary";
15
+ YdBtnStyle["secondary"] = "secondary";
16
+ YdBtnStyle["tertiary"] = "tertiary";
17
+ })(YdBtnStyle || (YdBtnStyle = {}));
18
+ ;
19
+ class YdButton {
20
+ size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
21
+ buttonStyle = input.required(...(ngDevMode ? [{ debugName: "buttonStyle" }] : []));
22
+ type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
23
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: (value) => typeof value === 'string' ? value === '' : value }] : [{
24
+ transform: (value) => typeof value === 'string' ? value === '' : value
25
+ }]));
26
+ fullSize = input(false, ...(ngDevMode ? [{ debugName: "fullSize", transform: (value) => typeof value === 'string' ? value === '' : value }] : [{
27
+ transform: (value) => typeof value === 'string' ? value === '' : value
28
+ }]));
29
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: YdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: YdButton, isStandalone: true, selector: "yd-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullSize: { classPropertyName: "fullSize", publicName: "fullSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.pointer-events--none": "disabled()", "class.w--100": "fullSize()" }, classAttribute: "yd-btn__container" }, ngImport: i0, template: "<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>", styles: ["*{--font-family-primary:\"Roboto\", sans-serif;--font-size-h1:4em;--font-size-h2:3.75em;--font-size-h3:3em;--font-size-h4:2.125em;--font-size-h5:1.5em;--font-size-h6:1.3125em;--font-size-b1:1em;--font-size-b2:.875em;--font-size-c1:.75em;--font-size-c2:.625em;--font-size-c3:.5em}*{--spacing-3xs:.125rem;--spacing-2xs:.25rem;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:3rem;--spacing-xl:4rem;--spacing-2xl:6.5rem;--spacing-blocks:1.25rem;--radius-0:.25rem;--radius-minimal:.5rem;--radius-rounded:1rem;--radius-full:10rem;--border-xs:.0625rem;--border-sm:.0781rem;--border-md:.0938rem;--border-lg:.125rem;--border-xl:.25rem}.theme--dark{--yd-color-text-primary:#eeeeee;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#4F4F4F;--yd-color-text-quaternary:#AFAFAF;--yd-color-surface-primary:#0B0C0C;--yd-color-surface-secondary:#151718;--yd-color-surface-tertiary:#1b1d1f;--yd-color-surface-quaternary:#2b2b2b;--yd-color-surface-quinary:#eeeeee;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#2b2b2b;--yd-color-border-tertiary:#2b2b2b;--yd-color-border-quaternary:#1b1d1f;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#1e6091;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#61a5c2;--yd-color-text-info-secondary:#468faf;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#0d2c38;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#1a4b5f;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#468faf;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#ffd4d1;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#D92D20;--yd-color-surface-danger-secondary:#520b06;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#FFF8E1;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#ad5100;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#dafff3;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#053c26;--yd-color-border-success-primary:#079455;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#085D3A;--yd-color-border-success-quaternary:#074D31;--yd-chip-color-surface-primary:#151718;--yd-chip-color-primary-text-default:#eeeeee;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#1b1d1f;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#C6C6C6;--yd-btn-color-secondary-text-hover:#C6C6C6;--yd-btn-color-secondary-text-active:#AFAFAF;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#151718;--yd-btn-color-secondary-surface-active:#0B0C0C;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#2b2b2b;--yd-btn-color-secondary-border-hover:#4F4F4F;--yd-btn-color-secondary-border-active:#1b1d1f;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#DDDDDD;--yd-btn-color-tertiary-text-default:#C6C6C6;--yd-btn-color-tertiary-text-hover:#C6C6C6;--yd-btn-color-tertiary-text-active:#AFAFAF;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#1b1d1f;--yd-btn-color-tertiary-surface-active:#0B0C0C;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#DDDDDD}.theme--light{--yd-color-text-primary:#1b1d1f;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#eeeeee;--yd-color-text-quaternary:#4F4F4F;--yd-color-surface-primary:#eeeeee;--yd-color-surface-secondary:#F9F9F9;--yd-color-surface-tertiary:#eeeeee;--yd-color-surface-quaternary:#C6C6C6;--yd-color-surface-quinary:#1b1d1f;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#C6C6C6;--yd-color-border-tertiary:#DDDDDD;--yd-color-border-quaternary:#eeeeee;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#76c893;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#468faf;--yd-color-text-info-secondary:#1a4b5f;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#dbf6ff;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#468faf;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#61a5c2;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#D92D20;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#F04438;--yd-color-surface-danger-secondary:#ffd4d1;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#DC6803;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#FFF8E1;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#085D3A;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#dafff3;--yd-color-border-success-primary:#085D3A;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#beffe2;--yd-color-border-success-quaternary:#dafff3;--yd-chip-color-surface-primary:#DDDDDD;--yd-chip-color-primary-text-default:#0B0C0C;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#C6C6C6;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#1b1d1f;--yd-btn-color-secondary-text-hover:#1b1d1f;--yd-btn-color-secondary-text-active:#0B0C0C;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#DDDDDD;--yd-btn-color-secondary-surface-active:#AFAFAF;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#C6C6C6;--yd-btn-color-secondary-border-hover:#2b2b2b;--yd-btn-color-secondary-border-active:#AFAFAF;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#89c2d9;--yd-btn-color-tertiary-text-default:#1b1d1f;--yd-btn-color-tertiary-text-hover:#2b2b2b;--yd-btn-color-tertiary-text-active:#0B0C0C;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#DDDDDD;--yd-btn-color-tertiary-surface-active:#C6C6C6;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#89c2d9}*{color:var(--yd-color-text-primary);font-family:var(--font-family-primary);margin:0;padding:0;transition:font-size .2s ease-in-out;transition:background-color .2s ease-in-out;line-height:140%;box-sizing:border-box}* *::-webkit-scrollbar{height:0;width:0}* body{background-color:var(--yd-color-surface-primary)}* p,* a,* li{transition:font-size .2s ease-in-out}* a,* ul{text-decoration:none}* ::marker{color:transparent}.font__color--primary{color:var(--yd-color-text-primary)}.font__color--secondary{color:var(--yd-color-text-secondary)}.font__color--tertiary{color:var(--yd-color-text-tertiary)}.font__color--quaternary{color:var(--yd-color-text-quaternary)}.font__color--link{color:var(--yd-color-text-info-primary)}.font__color--danger{color:var(--yd-color-text-danger-primary)}.font__color--brand-primary{color:var(--yd-color-text-brand-primary)}.font__color--brand-secondary{color:var(--yd-color-text-brand-secondary)}.font__size--h1{font-size:var(--font-size-h1)}.font__size--h2{font-size:var(--font-size-h2)}.font__size--h3{font-size:var(--font-size-h3)}.font__size--h4{font-size:var(--font-size-h4)}.font__size--h5{font-size:var(--font-size-h5)}.font__size--h6{font-size:var(--font-size-h6)}.font__size--b1{font-size:var(--font-size-b1)}.font__size--b2{font-size:var(--font-size-b2)}.font__size--c1{font-size:var(--font-size-c1)}.font__size--c2{font-size:var(--font-size-c2)}.font__size--c3{font-size:var(--font-size-c3)}.font__size--small{font-size:var(--font-size-c1)}.font__size--normal{font-size:var(--font-size-b2)}.font__size--large{font-size:var(--font-size-b1)}.font__weight--regular{font-weight:400}.font__weight--medium{font-weight:500}.font__weight--semibold{font-weight:600}.font__weight--bold{font-weight:700}.font__style--italic{font-style:italic}.font__decoration--underline{text-decoration:underline}@media screen and (max-width: 480px){.font__size--small{font-size:var(--font-size-c2)}.font__size--normal{font-size:var(--font-size-c1)}.font__size--large{font-size:var(--font-size-b2)}}.z-index-1{z-index:1}.pointer-events--none{pointer-events:none}.w--20px{width:1.25rem}.w--100{width:100%}.w--fit-content{width:fit-content}.cursor--pointer{cursor:pointer}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transition--bg{transition:background-color .2s ease-in-out}.display--none{display:none}.yd-btn__container{position:relative}.yd-btn__container .yd-btn{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;gap:var(--spacing-xs);border-radius:var(--radius-minimal);cursor:pointer;font-weight:500;white-space:nowrap;text-overflow:ellipsis;border-style:solid}.yd-btn__container .yd-btn.small{padding:var(--spacing-xs);font-size:var(--font-size-c1)}.yd-btn__container .yd-btn.normal{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-b2)}.yd-btn__container .yd-btn.large{padding:var(--spacing-sm);font-size:var(--font-size-b1)}.yd-btn__container .yd-btn img{width:.85rem;height:.85rem}.yd-btn__container .yd-btn.w--100{width:100%}.yd-btn__container .yd-btn.yd-btn__primary{background-color:var(--yd-btn-color-primary-surface-default);color:var(--yd-btn-color-primary-text-default);border-width:var(--border-xs);border-color:var(--yd-btn-color-primary-border-default)}.yd-btn__container .yd-btn.yd-btn__primary:hover{background-color:var(--yd-btn-color-primary-surface-hover);color:var(--yd-btn-color-primary-text-hover);border-color:var(--yd-btn-color-primary-border-hover)}.yd-btn__container .yd-btn.yd-btn__primary:active{background-color:var(--yd-btn-color-primary-surface-active);color:var(--yd-btn-color-primary-text-active);border-color:var(--yd-btn-color-primary-border-active)}.yd-btn__container .yd-btn.yd-btn__primary.btn__disabled{background-color:var(--yd-btn-color-primary-surface-disabled);color:var(--yd-btn-color-primary-text-disabled);border-color:var(--yd-btn-color-primary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__primary:focus-visible{outline-color:var(--yd-btn-color-primary-outline-focus);outline-width:var(--border-lg)}.yd-btn__container .yd-btn.yd-btn__secondary{background-color:var(--yd-btn-color-secondary-surface-default);color:var(--yd-btn-color-secondary-text-default);border-color:var(--yd-btn-color-secondary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__secondary:hover{background-color:var(--yd-btn-color-secondary-surface-hover);color:var(--yd-btn-color-secondary-text-hover);border-color:var(--yd-btn-color-secondary-border-hover)}.yd-btn__container .yd-btn.yd-btn__secondary:active{background-color:var(--yd-btn-color-secondary-surface-active);color:var(--yd-btn-color-secondary-text-active);border-color:var(--yd-btn-color-secondary-border-active)}.yd-btn__container .yd-btn.yd-btn__secondary.yd-btn__disabled{background-color:var(--yd-btn-color-secondary-surface-disabled);color:var(--yd-btn-color-secondary-text-disabled);border-color:var(--yd-btn-color-secondary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__secondary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-secondary-outline-focus)}.yd-btn__container .yd-btn.yd-btn__tertiary{background-color:var(--yd-btn-color-tertiary-surface-default);color:var(--yd-btn-color-tertiary-text-default);border-color:var(--yd-btn-color-tertiary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__tertiary:hover{background-color:var(--yd-btn-color-tertiary-surface-hover);color:var(--yd-btn-color-tertiary-text-hover);border-color:var(--yd-btn-color-tertiary-border-hover)}.yd-btn__container .yd-btn.yd-btn__tertiary:active{background-color:var(--yd-btn-color-tertiary-surface-active);color:var(--yd-btn-color-tertiary-text-active);border-color:var(--yd-btn-color-tertiary-border-active)}.yd-btn__container .yd-btn.yd-btn__tertiary.yd-btn__disabled{background-color:var(--yd-btn-color-tertiary-surface-disabled);color:var(--yd-btn-color-tertiary-text-disabled);border-color:var(--yd-btn-color-tertiary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__tertiary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-tertiary-outline-focus)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
31
+ }
32
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: YdButton, decorators: [{
33
+ type: Component,
34
+ args: [{ selector: 'yd-button', imports: [NgClass], host: {
35
+ '[class.pointer-events--none]': 'disabled()',
36
+ '[class.w--100]': 'fullSize()',
37
+ 'class': 'yd-btn__container',
38
+ }, encapsulation: ViewEncapsulation.None, template: "<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>", styles: ["*{--font-family-primary:\"Roboto\", sans-serif;--font-size-h1:4em;--font-size-h2:3.75em;--font-size-h3:3em;--font-size-h4:2.125em;--font-size-h5:1.5em;--font-size-h6:1.3125em;--font-size-b1:1em;--font-size-b2:.875em;--font-size-c1:.75em;--font-size-c2:.625em;--font-size-c3:.5em}*{--spacing-3xs:.125rem;--spacing-2xs:.25rem;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:3rem;--spacing-xl:4rem;--spacing-2xl:6.5rem;--spacing-blocks:1.25rem;--radius-0:.25rem;--radius-minimal:.5rem;--radius-rounded:1rem;--radius-full:10rem;--border-xs:.0625rem;--border-sm:.0781rem;--border-md:.0938rem;--border-lg:.125rem;--border-xl:.25rem}.theme--dark{--yd-color-text-primary:#eeeeee;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#4F4F4F;--yd-color-text-quaternary:#AFAFAF;--yd-color-surface-primary:#0B0C0C;--yd-color-surface-secondary:#151718;--yd-color-surface-tertiary:#1b1d1f;--yd-color-surface-quaternary:#2b2b2b;--yd-color-surface-quinary:#eeeeee;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#2b2b2b;--yd-color-border-tertiary:#2b2b2b;--yd-color-border-quaternary:#1b1d1f;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#1e6091;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#61a5c2;--yd-color-text-info-secondary:#468faf;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#0d2c38;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#1a4b5f;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#468faf;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#ffd4d1;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#D92D20;--yd-color-surface-danger-secondary:#520b06;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#FFF8E1;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#ad5100;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#dafff3;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#053c26;--yd-color-border-success-primary:#079455;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#085D3A;--yd-color-border-success-quaternary:#074D31;--yd-chip-color-surface-primary:#151718;--yd-chip-color-primary-text-default:#eeeeee;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#1b1d1f;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#C6C6C6;--yd-btn-color-secondary-text-hover:#C6C6C6;--yd-btn-color-secondary-text-active:#AFAFAF;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#151718;--yd-btn-color-secondary-surface-active:#0B0C0C;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#2b2b2b;--yd-btn-color-secondary-border-hover:#4F4F4F;--yd-btn-color-secondary-border-active:#1b1d1f;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#DDDDDD;--yd-btn-color-tertiary-text-default:#C6C6C6;--yd-btn-color-tertiary-text-hover:#C6C6C6;--yd-btn-color-tertiary-text-active:#AFAFAF;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#1b1d1f;--yd-btn-color-tertiary-surface-active:#0B0C0C;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#DDDDDD}.theme--light{--yd-color-text-primary:#1b1d1f;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#eeeeee;--yd-color-text-quaternary:#4F4F4F;--yd-color-surface-primary:#eeeeee;--yd-color-surface-secondary:#F9F9F9;--yd-color-surface-tertiary:#eeeeee;--yd-color-surface-quaternary:#C6C6C6;--yd-color-surface-quinary:#1b1d1f;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#C6C6C6;--yd-color-border-tertiary:#DDDDDD;--yd-color-border-quaternary:#eeeeee;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#76c893;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#468faf;--yd-color-text-info-secondary:#1a4b5f;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#dbf6ff;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#468faf;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#61a5c2;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#D92D20;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#F04438;--yd-color-surface-danger-secondary:#ffd4d1;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#DC6803;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#FFF8E1;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#085D3A;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#dafff3;--yd-color-border-success-primary:#085D3A;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#beffe2;--yd-color-border-success-quaternary:#dafff3;--yd-chip-color-surface-primary:#DDDDDD;--yd-chip-color-primary-text-default:#0B0C0C;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#C6C6C6;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#1b1d1f;--yd-btn-color-secondary-text-hover:#1b1d1f;--yd-btn-color-secondary-text-active:#0B0C0C;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#DDDDDD;--yd-btn-color-secondary-surface-active:#AFAFAF;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#C6C6C6;--yd-btn-color-secondary-border-hover:#2b2b2b;--yd-btn-color-secondary-border-active:#AFAFAF;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#89c2d9;--yd-btn-color-tertiary-text-default:#1b1d1f;--yd-btn-color-tertiary-text-hover:#2b2b2b;--yd-btn-color-tertiary-text-active:#0B0C0C;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#DDDDDD;--yd-btn-color-tertiary-surface-active:#C6C6C6;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#89c2d9}*{color:var(--yd-color-text-primary);font-family:var(--font-family-primary);margin:0;padding:0;transition:font-size .2s ease-in-out;transition:background-color .2s ease-in-out;line-height:140%;box-sizing:border-box}* *::-webkit-scrollbar{height:0;width:0}* body{background-color:var(--yd-color-surface-primary)}* p,* a,* li{transition:font-size .2s ease-in-out}* a,* ul{text-decoration:none}* ::marker{color:transparent}.font__color--primary{color:var(--yd-color-text-primary)}.font__color--secondary{color:var(--yd-color-text-secondary)}.font__color--tertiary{color:var(--yd-color-text-tertiary)}.font__color--quaternary{color:var(--yd-color-text-quaternary)}.font__color--link{color:var(--yd-color-text-info-primary)}.font__color--danger{color:var(--yd-color-text-danger-primary)}.font__color--brand-primary{color:var(--yd-color-text-brand-primary)}.font__color--brand-secondary{color:var(--yd-color-text-brand-secondary)}.font__size--h1{font-size:var(--font-size-h1)}.font__size--h2{font-size:var(--font-size-h2)}.font__size--h3{font-size:var(--font-size-h3)}.font__size--h4{font-size:var(--font-size-h4)}.font__size--h5{font-size:var(--font-size-h5)}.font__size--h6{font-size:var(--font-size-h6)}.font__size--b1{font-size:var(--font-size-b1)}.font__size--b2{font-size:var(--font-size-b2)}.font__size--c1{font-size:var(--font-size-c1)}.font__size--c2{font-size:var(--font-size-c2)}.font__size--c3{font-size:var(--font-size-c3)}.font__size--small{font-size:var(--font-size-c1)}.font__size--normal{font-size:var(--font-size-b2)}.font__size--large{font-size:var(--font-size-b1)}.font__weight--regular{font-weight:400}.font__weight--medium{font-weight:500}.font__weight--semibold{font-weight:600}.font__weight--bold{font-weight:700}.font__style--italic{font-style:italic}.font__decoration--underline{text-decoration:underline}@media screen and (max-width: 480px){.font__size--small{font-size:var(--font-size-c2)}.font__size--normal{font-size:var(--font-size-c1)}.font__size--large{font-size:var(--font-size-b2)}}.z-index-1{z-index:1}.pointer-events--none{pointer-events:none}.w--20px{width:1.25rem}.w--100{width:100%}.w--fit-content{width:fit-content}.cursor--pointer{cursor:pointer}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transition--bg{transition:background-color .2s ease-in-out}.display--none{display:none}.yd-btn__container{position:relative}.yd-btn__container .yd-btn{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;gap:var(--spacing-xs);border-radius:var(--radius-minimal);cursor:pointer;font-weight:500;white-space:nowrap;text-overflow:ellipsis;border-style:solid}.yd-btn__container .yd-btn.small{padding:var(--spacing-xs);font-size:var(--font-size-c1)}.yd-btn__container .yd-btn.normal{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-b2)}.yd-btn__container .yd-btn.large{padding:var(--spacing-sm);font-size:var(--font-size-b1)}.yd-btn__container .yd-btn img{width:.85rem;height:.85rem}.yd-btn__container .yd-btn.w--100{width:100%}.yd-btn__container .yd-btn.yd-btn__primary{background-color:var(--yd-btn-color-primary-surface-default);color:var(--yd-btn-color-primary-text-default);border-width:var(--border-xs);border-color:var(--yd-btn-color-primary-border-default)}.yd-btn__container .yd-btn.yd-btn__primary:hover{background-color:var(--yd-btn-color-primary-surface-hover);color:var(--yd-btn-color-primary-text-hover);border-color:var(--yd-btn-color-primary-border-hover)}.yd-btn__container .yd-btn.yd-btn__primary:active{background-color:var(--yd-btn-color-primary-surface-active);color:var(--yd-btn-color-primary-text-active);border-color:var(--yd-btn-color-primary-border-active)}.yd-btn__container .yd-btn.yd-btn__primary.btn__disabled{background-color:var(--yd-btn-color-primary-surface-disabled);color:var(--yd-btn-color-primary-text-disabled);border-color:var(--yd-btn-color-primary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__primary:focus-visible{outline-color:var(--yd-btn-color-primary-outline-focus);outline-width:var(--border-lg)}.yd-btn__container .yd-btn.yd-btn__secondary{background-color:var(--yd-btn-color-secondary-surface-default);color:var(--yd-btn-color-secondary-text-default);border-color:var(--yd-btn-color-secondary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__secondary:hover{background-color:var(--yd-btn-color-secondary-surface-hover);color:var(--yd-btn-color-secondary-text-hover);border-color:var(--yd-btn-color-secondary-border-hover)}.yd-btn__container .yd-btn.yd-btn__secondary:active{background-color:var(--yd-btn-color-secondary-surface-active);color:var(--yd-btn-color-secondary-text-active);border-color:var(--yd-btn-color-secondary-border-active)}.yd-btn__container .yd-btn.yd-btn__secondary.yd-btn__disabled{background-color:var(--yd-btn-color-secondary-surface-disabled);color:var(--yd-btn-color-secondary-text-disabled);border-color:var(--yd-btn-color-secondary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__secondary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-secondary-outline-focus)}.yd-btn__container .yd-btn.yd-btn__tertiary{background-color:var(--yd-btn-color-tertiary-surface-default);color:var(--yd-btn-color-tertiary-text-default);border-color:var(--yd-btn-color-tertiary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__tertiary:hover{background-color:var(--yd-btn-color-tertiary-surface-hover);color:var(--yd-btn-color-tertiary-text-hover);border-color:var(--yd-btn-color-tertiary-border-hover)}.yd-btn__container .yd-btn.yd-btn__tertiary:active{background-color:var(--yd-btn-color-tertiary-surface-active);color:var(--yd-btn-color-tertiary-text-active);border-color:var(--yd-btn-color-tertiary-border-active)}.yd-btn__container .yd-btn.yd-btn__tertiary.yd-btn__disabled{background-color:var(--yd-btn-color-tertiary-surface-disabled);color:var(--yd-btn-color-tertiary-text-disabled);border-color:var(--yd-btn-color-tertiary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__tertiary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-tertiary-outline-focus)}\n"] }]
39
+ }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullSize", required: false }] }] } });
40
+
41
+ /*
42
+ * Public API Surface of yudu-component-kit
43
+ */
44
+
45
+ /**
46
+ * Generated bundle index. Do not edit.
47
+ */
48
+
49
+ export { YdBtnSize, YdBtnStyle, YdButton };
50
+ //# sourceMappingURL=yudu-component-kit.mjs.map
package/fesm2022/yudu-component-kit.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"yudu-component-kit.mjs","sources":["../../../projects/yudu-component-kit/src/lib/components/yd-button/yd-button.ts","../../../projects/yudu-component-kit/src/lib/components/yd-button/yd-button.html","../../../projects/yudu-component-kit/src/public-api.ts","../../../projects/yudu-component-kit/src/yudu-component-kit.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, input, ViewEncapsulation } from '@angular/core';\r\n\r\nexport enum YdBtnSize {\r\n small = 'small',\r\n normal = 'normal',\r\n large = 'large',\r\n};\r\n\r\nexport enum YdBtnStyle {\r\n primary = 'primary',\r\n secondary = 'secondary',\r\n tertiary = 'tertiary',\r\n};\r\n\r\n@Component({\r\n selector: 'yd-button',\r\n imports: [ NgClass ],\r\n templateUrl: './yd-button.html',\r\n styleUrl: '../../styles/index.design-system.scss',\r\n host:{\r\n '[class.pointer-events--none]':'disabled()',\r\n '[class.w--100]':'fullSize()',\r\n 'class':'yd-btn__container',\r\n },\r\n encapsulation:ViewEncapsulation.None\r\n})\r\nexport class YdButton {\r\n public size = input.required<YdBtnSize>();\r\n public buttonStyle = input.required<YdBtnStyle>();\r\n public type = input<string>('text');\r\n \r\n public disabled = input(false, {\r\n transform:(value:boolean | string) => \r\n typeof value === 'string' ? value === '' : value\r\n });\r\n \r\n public fullSize = input(false, {\r\n transform:(value:boolean | string) => \r\n typeof value === 'string' ? value === '' : value\r\n });\r\n\r\n}\r\n","<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>","/*\r\n * Public API Surface of yudu-component-kit\r\n */\r\n\r\nexport * from './lib/components/yd-button/yd-button';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;IAGY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;AAIpB;IAEW;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAJW,UAAU,KAAV,UAAU,GAAA,EAAA,CAAA,CAAA;AAIrB;MAcY,QAAQ,CAAA;AACZ,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAa;AAClC,IAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,sDAAc;AAC1C,IAAA,IAAI,GAAG,KAAK,CAAS,MAAM,gDAAC;IAE5B,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAC3B,SAAS,EAAC,CAAC,KAAsB,KAC/B,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,KAAK,EAAE,GAAG,KAAK,EAAA,CAAA,GAAA,CAFrB;AAC7B,YAAA,SAAS,EAAC,CAAC,KAAsB,KAC/B,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,KAAK,EAAE,GAAG;AAC9C,SAAA,CAAA,CAAA,CAAC;IAEK,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAC3B,SAAS,EAAC,CAAC,KAAsB,KAC/B,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,KAAK,EAAE,GAAG,KAAK,EAAA,CAAA,GAAA,CAFrB;AAC7B,YAAA,SAAS,EAAC,CAAC,KAAsB,KAC/B,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,KAAK,EAAE,GAAG;AAC9C,SAAA,CAAA,CAAA,CAAC;uGAbS,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,4BAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3BrB,2gBAeS,EAAA,MAAA,EAAA,CAAA,wzcAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAUP,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAZpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAE,OAAO,CAAE,EAAA,IAAA,EAGf;AACH,wBAAA,8BAA8B,EAAC,YAAY;AAC3C,wBAAA,gBAAgB,EAAC,YAAY;AAC7B,wBAAA,OAAO,EAAC,mBAAmB;qBAC5B,EAAA,aAAA,EACa,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,2gBAAA,EAAA,MAAA,EAAA,CAAA,wzcAAA,CAAA,EAAA;;;AEzBtC;;AAEG;;ACFH;;AAEG;;;;"}
package/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import * as _angular_core from '@angular/core';
2
+
3
+ declare enum YdBtnSize {
4
+ small = "small",
5
+ normal = "normal",
6
+ large = "large"
7
+ }
8
+ declare enum YdBtnStyle {
9
+ primary = "primary",
10
+ secondary = "secondary",
11
+ tertiary = "tertiary"
12
+ }
13
+ declare class YdButton {
14
+ size: _angular_core.InputSignal<YdBtnSize>;
15
+ buttonStyle: _angular_core.InputSignal<YdBtnStyle>;
16
+ type: _angular_core.InputSignal<string>;
17
+ disabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
18
+ fullSize: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
19
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YdButton, never>;
20
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<YdButton, "yd-button", never, { "size": { "alias": "size"; "required": true; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullSize": { "alias": "fullSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
21
+ }
22
+
23
+ export { YdBtnSize, YdBtnStyle, YdButton };
package/package.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "yudu-component-kit",
3
+ "version": "0.0.1",
4
+ "peerDependencies": {
5
+ "@angular/common": "^20.3.0",
6
+ "@angular/core": "^20.3.0"
7
+ },
8
+ "dependencies": {
9
+ "tslib": "^2.3.0"
10
+ },
11
+ "sideEffects": false,
12
+ "module": "fesm2022/yudu-component-kit.mjs",
13
+ "typings": "index.d.ts",
14
+ "exports": {
15
+ "./package.json": {
16
+ "default": "./package.json"
17
+ },
18
+ ".": {
19
+ "types": "./index.d.ts",
20
+ "default": "./fesm2022/yudu-component-kit.mjs"
21
+ }
22
+ }
23
+ }
package/src/lib/styles/classes/_index_classes.scss ADDED
@@ -0,0 +1,9 @@
1
+ // Global classes
2
+ @forward './global.scss';
3
+
4
+ // Fonts & Helpers
5
+ @forward './yd-font.scss';
6
+ @forward './yd-helpers.scss';
7
+
8
+ // Components Classes
9
+ @forward './yd-button.scss';
package/src/lib/styles/classes/global.scss ADDED
@@ -0,0 +1,27 @@
1
+ * {
2
+ color: var(--yd-color-text-primary);
3
+ font-family:var(--font-family-primary);
4
+ margin: 0;
5
+ padding: 0;
6
+ transition: font-size .2s ease-in-out;
7
+ transition: background-color .2s ease-in-out;
8
+ line-height: 140%;
9
+ box-sizing: border-box;
10
+ *::-webkit-scrollbar {
11
+ height:0;
12
+ width:0;
13
+ }
14
+ body {
15
+ background-color:var(--yd-color-surface-primary);
16
+ }
17
+ p, a, li {
18
+ transition: font-size .2s ease-in-out;
19
+ }
20
+ a, ul {
21
+ text-decoration: none;
22
+ }
23
+ ::marker {
24
+ color: transparent;
25
+ }
26
+
27
+ }
package/src/lib/styles/classes/yd-button.scss ADDED
@@ -0,0 +1,127 @@
1
+ // Buttons
2
+ .yd-btn__container {
3
+ position: relative;
4
+ .yd-btn {
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ width: fit-content;
9
+ height: fit-content;
10
+ gap: var(--spacing-xs);
11
+ border-radius: var(--radius-minimal);
12
+ cursor: pointer;
13
+ font-weight: 500;
14
+ white-space: nowrap;
15
+ text-overflow: ellipsis;
16
+ border-style: solid;
17
+
18
+
19
+ &.small {
20
+ padding:var(--spacing-xs);
21
+ font-size: var(--font-size-c1);
22
+ }
23
+
24
+ &.normal {
25
+ padding:var(--spacing-xs) var(--spacing-sm);
26
+ font-size: var(--font-size-b2);
27
+ }
28
+ &.large {
29
+ padding:var(--spacing-sm);
30
+ font-size: var(--font-size-b1);
31
+ }
32
+ & img {
33
+ width: .85rem;
34
+ height: .85rem;
35
+ }
36
+
37
+ &.w--100 {
38
+ width: 100%;
39
+ }
40
+
41
+ &.yd-btn__primary {
42
+ background-color: var(--yd-btn-color-primary-surface-default);
43
+ color: var(--yd-btn-color-primary-text-default);
44
+ border-width:var(--border-xs);
45
+ border-color:var(--yd-btn-color-primary-border-default);
46
+
47
+ &:hover {
48
+ background-color: var(--yd-btn-color-primary-surface-hover);
49
+ color: var(--yd-btn-color-primary-text-hover);
50
+ border-color:var(--yd-btn-color-primary-border-hover);
51
+ }
52
+
53
+ &:active {
54
+ background-color: var(--yd-btn-color-primary-surface-active);
55
+ color: var(--yd-btn-color-primary-text-active);
56
+ border-color:var(--yd-btn-color-primary-border-active);
57
+ }
58
+ &.btn__disabled {
59
+ background-color: var(--yd-btn-color-primary-surface-disabled);
60
+ color: var(--yd-btn-color-primary-text-disabled);
61
+ border-color: var(--yd-btn-color-primary-border-disabled);
62
+ opacity: .3;
63
+ }
64
+ &:focus-visible {
65
+ outline-color:var(--yd-btn-color-primary-outline-focus);
66
+ outline-width:var(--border-lg);
67
+ }
68
+
69
+ }
70
+
71
+ &.yd-btn__secondary {
72
+ background-color: var(--yd-btn-color-secondary-surface-default);
73
+ color: var(--yd-btn-color-secondary-text-default);
74
+ border-color: var(--yd-btn-color-secondary-border-default);
75
+ border-width: var(--border-xs);
76
+
77
+ &:hover {
78
+ background-color: var(--yd-btn-color-secondary-surface-hover);
79
+ color:var(--yd-btn-color-secondary-text-hover);
80
+ border-color: var(--yd-btn-color-secondary-border-hover);
81
+ }
82
+ &:active {
83
+ background-color: var(--yd-btn-color-secondary-surface-active);
84
+ color:var(--yd-btn-color-secondary-text-active);
85
+ border-color: var(--yd-btn-color-secondary-border-active);
86
+ }
87
+ &.yd-btn__disabled {
88
+ background-color: var(--yd-btn-color-secondary-surface-disabled);
89
+ color: var(--yd-btn-color-secondary-text-disabled);
90
+ border-color: var(--yd-btn-color-secondary-border-disabled);
91
+ opacity: .3;
92
+ }
93
+ &:focus-visible {
94
+ outline-width:var(--border-lg);
95
+ outline-color:var(--yd-btn-color-secondary-outline-focus);
96
+ }
97
+ }
98
+
99
+ &.yd-btn__tertiary {
100
+ background-color: var(--yd-btn-color-tertiary-surface-default);
101
+ color: var(--yd-btn-color-tertiary-text-default);
102
+ border-color: var(--yd-btn-color-tertiary-border-default);
103
+ border-width: var(--border-xs);
104
+
105
+ &:hover {
106
+ background-color: var(--yd-btn-color-tertiary-surface-hover);
107
+ color:var(--yd-btn-color-tertiary-text-hover);
108
+ border-color: var(--yd-btn-color-tertiary-border-hover);
109
+ }
110
+ &:active {
111
+ background-color: var(--yd-btn-color-tertiary-surface-active);
112
+ color:var(--yd-btn-color-tertiary-text-active);
113
+ border-color: var(--yd-btn-color-tertiary-border-active);
114
+ }
115
+ &.yd-btn__disabled {
116
+ background-color: var(--yd-btn-color-tertiary-surface-disabled);
117
+ color: var(--yd-btn-color-tertiary-text-disabled);
118
+ border-color: var(--yd-btn-color-tertiary-border-disabled);
119
+ opacity: .3;
120
+ }
121
+ &:focus-visible {
122
+ outline-width:var(--border-lg);
123
+ outline-color:var(--yd-btn-color-tertiary-outline-focus);
124
+ }
125
+ }
126
+ }
127
+ }
package/src/lib/styles/classes/yd-font.scss ADDED
@@ -0,0 +1,103 @@
1
+ // ------------------ Colors ------------------
2
+ .font__color--primary {
3
+ color: var(--yd-color-text-primary);
4
+ }
5
+ .font__color--secondary {
6
+ color: var(--yd-color-text-secondary);
7
+ }
8
+ .font__color--tertiary {
9
+ color: var(--yd-color-text-tertiary);
10
+ }
11
+ .font__color--quaternary {
12
+ color: var(--yd-color-text-quaternary);
13
+ }
14
+ .font__color--link {
15
+ color: var(--yd-color-text-info-primary);
16
+ }
17
+ .font__color--danger {
18
+ color: var(--yd-color-text-danger-primary);
19
+ }
20
+ .font__color--brand-primary {
21
+ color: var(--yd-color-text-brand-primary);
22
+ }
23
+ .font__color--brand-secondary {
24
+ color: var(--yd-color-text-brand-secondary);
25
+ }
26
+
27
+ // ------------------ Sizes ------------------
28
+ .font__size--h1 {
29
+ font-size: var(--font-size-h1);
30
+ }
31
+ .font__size--h2 {
32
+ font-size: var(--font-size-h2);
33
+ }
34
+ .font__size--h3 {
35
+ font-size: var(--font-size-h3);
36
+ }
37
+ .font__size--h4 {
38
+ font-size: var(--font-size-h4);
39
+ }
40
+ .font__size--h5 {
41
+ font-size: var(--font-size-h5);
42
+ }
43
+ .font__size--h6 {
44
+ font-size: var(--font-size-h6);
45
+ }
46
+ .font__size--b1 {
47
+ font-size: var(--font-size-b1);
48
+ }
49
+ .font__size--b2 {
50
+ font-size: var(--font-size-b2);
51
+ }
52
+ .font__size--c1 {
53
+ font-size: var(--font-size-c1);
54
+ }
55
+ .font__size--c2 {
56
+ font-size: var(--font-size-c2);
57
+ }
58
+ .font__size--c3 {
59
+ font-size: var(--font-size-c3);
60
+ }
61
+ // Standard Sizes
62
+ .font__size--small {
63
+ font-size: var(--font-size-c1);
64
+ }
65
+ .font__size--normal {
66
+ font-size: var(--font-size-b2);
67
+ }
68
+ .font__size--large {
69
+ font-size: var(--font-size-b1);
70
+ }
71
+
72
+ // ------------------ Weight ------------------
73
+ .font__weight--regular {
74
+ font-weight:400;
75
+ }
76
+ .font__weight--medium {
77
+ font-weight:500;
78
+ }
79
+ .font__weight--semibold {
80
+ font-weight:600;
81
+ }
82
+ .font__weight--bold {
83
+ font-weight:700;
84
+ }
85
+ // Font Style
86
+ .font__style--italic {
87
+ font-style: italic;
88
+ }
89
+ .font__decoration--underline {
90
+ text-decoration:underline;
91
+ }
92
+
93
+ @media screen and (max-width:480px) {
94
+ .font__size--small {
95
+ font-size: var(--font-size-c2);
96
+ }
97
+ .font__size--normal {
98
+ font-size: var(--font-size-c1);
99
+ }
100
+ .font__size--large {
101
+ font-size: var(--font-size-b2);
102
+ }
103
+ }
package/src/lib/styles/classes/yd-helpers.scss ADDED
@@ -0,0 +1,30 @@
1
+ // Helpers
2
+ .z-index-1 {
3
+ z-index: 1;
4
+ }
5
+ .pointer-events--none {
6
+ pointer-events: none;
7
+ }
8
+ .w--20px {
9
+ width: 1.25rem;
10
+ }
11
+ .w--100 {
12
+ width: 100%;
13
+ }
14
+ .w--fit-content {
15
+ width: fit-content;
16
+ }
17
+ .cursor--pointer {
18
+ cursor: pointer;
19
+ }
20
+ .text--ellipsis {
21
+ white-space: nowrap;
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ }
25
+ .transition--bg {
26
+ transition:background-color .2s ease-in-out;
27
+ }
28
+ .display--none {
29
+ display: none;
30
+ }
package/src/lib/styles/index.design-system.scss ADDED
@@ -0,0 +1,7 @@
1
+ // Core
2
+ @use './tokens/index_tokens';
3
+ @use './variables/index_variables';
4
+ // Themes
5
+ @use './themes/index_themes';
6
+ // Classes
7
+ @use './classes/index_classes';
package/src/lib/styles/themes/_dark.theme.scss ADDED
@@ -0,0 +1,125 @@
1
+ @use '../variables/colors.variables' as *;
2
+
3
+ .theme--dark {
4
+ --yd-color-text-primary :#{$grey-50};
5
+ --yd-color-text-secondary :#{$grey-400};
6
+ --yd-color-text-tertiary :#{$grey-500};
7
+ --yd-color-text-quaternary :#{$grey-300};
8
+
9
+ --yd-color-surface-primary :#{$grey-700};
10
+ --yd-color-surface-secondary :#{$grey-650};
11
+ --yd-color-surface-tertiary :#{$grey-600};
12
+ --yd-color-surface-quaternary :#{$grey-550};
13
+ --yd-color-surface-quinary :#{$grey-50};
14
+
15
+ --yd-color-border-primary :#{$grey-400};
16
+ --yd-color-border-secondary :#{$grey-550};
17
+ --yd-color-border-tertiary :#{$grey-550};
18
+ --yd-color-border-quaternary :#{$grey-600};
19
+
20
+ --yd-color-text-brand-primary :#{$brand-300};
21
+ --yd-color-text-brand-secondary :#{$brand-200};
22
+
23
+ --yd-color-surface-brand-primary :#{$brand-300};
24
+ --yd-color-surface-brand-secondary :#{$brand-400};
25
+
26
+ --yd-color-border-brand-primary :#{$brand-300};
27
+ --yd-color-border-brand-secondary :#{$brand-200};
28
+
29
+ --yd-color-text-info-primary :#{$blue-300};
30
+ --yd-color-text-info-secondary :#{$blue-400};
31
+ --yd-color-text-info-tertiary :#{$blue-0};
32
+
33
+ --yd-color-surface-info-primary :#{$blue-600};
34
+ --yd-color-surface-info-secondary :#{$blue-100};
35
+ --yd-color-surface-info-tertiary :#{$blue-300};
36
+ --yd-color-surface-info-quaternary :#{$blue-500};
37
+ --yd-color-surface-info-quinary :#{$blue-200};
38
+
39
+ --yd-color-border-info-primary :#{$blue-400};
40
+ --yd-color-border-info-secondary :#{$blue-500};
41
+
42
+ --yd-color-text-danger-primary :#{$danger-0};
43
+ --yd-color-text-danger-secondary :#{$danger-500};
44
+
45
+ --yd-color-surface-danger-primary :#{$danger-300};
46
+ --yd-color-surface-danger-secondary :#{$danger-600};
47
+
48
+ --yd-color-border-danger-primary :#{$danger-100};
49
+ --yd-color-border-danger-secondary :#{$danger-300};
50
+ --yd-color-border-danger-tertiary :#{$danger-500};
51
+
52
+ --yd-color-text-warning-primary :#{$warning-0};
53
+
54
+ --yd-color-surface-warning-primary :#{$warning-300};
55
+ --yd-color-surface-warning-secondary :#{$warning-600};
56
+
57
+ --yd-color-border-warning-primary :#{$warning-400};
58
+ --yd-color-border-warning-secondary :#{$warning-300};
59
+ --yd-color-border-warning-tertiary :#{$warning-500};
60
+
61
+ --yd-color-text-success-primary :#{$success-0};
62
+
63
+ --yd-color-surface-success-primary :#{$success-300};
64
+ --yd-color-surface-success-secondary :#{$success-500};
65
+
66
+ --yd-color-border-success-primary :#{$success-100};
67
+ --yd-color-border-success-secondary :#{$success-100};
68
+ --yd-color-border-success-tertiary :#{$success-300};
69
+ --yd-color-border-success-quaternary :#{$success-400};
70
+ // <------- Chips -------->
71
+ --yd-chip-color-surface-primary :#{$grey-650};
72
+ --yd-chip-color-primary-text-default :#{$grey-50};
73
+ // <------- buttons -------->
74
+ // Primary
75
+ --yd-btn-color-primary-text-default :#{$grey-0};
76
+ --yd-btn-color-primary-text-hover :#{$grey-50};
77
+ --yd-btn-color-primary-text-active :#{$grey-0};
78
+ --yd-btn-color-primary-text-disabled :#{$grey-500};
79
+
80
+ --yd-btn-color-primary-surface-default :#{$brand-300};
81
+ --yd-btn-color-primary-surface-hover :#{$brand-200};
82
+ --yd-btn-color-primary-surface-active :#{$brand-400};
83
+ --yd-btn-color-primary-surface-disabled :#{$grey-600};
84
+
85
+ --yd-btn-color-primary-border-default :transparent;
86
+ --yd-btn-color-primary-border-hover :transparent;
87
+ --yd-btn-color-primary-border-active :transparent;
88
+ --yd-btn-color-primary-border-disabled :transparent;
89
+
90
+ --yd-btn-color-primary-outline-focus :#{$grey-100};
91
+ // Secondary
92
+ --yd-btn-color-secondary-text-default :#{$grey-200};
93
+ --yd-btn-color-secondary-text-hover :#{$grey-200};
94
+ --yd-btn-color-secondary-text-active :#{$grey-300};
95
+ --yd-btn-color-secondary-text-disabled :#{$grey-500};
96
+
97
+ --yd-btn-color-secondary-surface-default :transparent;
98
+ --yd-btn-color-secondary-surface-hover :#{$grey-650};
99
+ --yd-btn-color-secondary-surface-active :#{$grey-700};
100
+ --yd-btn-color-secondary-surface-disabled :transparent;
101
+
102
+ --yd-btn-color-secondary-border-default :#{$grey-550};
103
+ --yd-btn-color-secondary-border-hover :#{$grey-500};
104
+ --yd-btn-color-secondary-border-active :#{$grey-600};
105
+ --yd-btn-color-secondary-border-disabled :#{$grey-500};
106
+
107
+ --yd-btn-color-secondary-outline-focus :#{$grey-100};
108
+ // Tertiary
109
+ --yd-btn-color-tertiary-text-default :#{$grey-200};
110
+ --yd-btn-color-tertiary-text-hover :#{$grey-200};
111
+ --yd-btn-color-tertiary-text-active :#{$grey-300};
112
+ --yd-btn-color-tertiary-text-disabled :#{$grey-500};
113
+
114
+ --yd-btn-color-tertiary-surface-default :transparent;
115
+ --yd-btn-color-tertiary-surface-hover :#{$grey-600};
116
+ --yd-btn-color-tertiary-surface-active :#{$grey-700};
117
+ --yd-btn-color-tertiary-surface-disabled :transparent;
118
+
119
+ --yd-btn-color-tertiary-border-default :transparent;
120
+ --yd-btn-color-tertiary-border-hover :transparent;
121
+ --yd-btn-color-tertiary-border-active :transparent;
122
+ --yd-btn-color-tertiary-border-disabled :transparent;
123
+
124
+ --yd-btn-color-tertiary-outline-focus :#{$grey-100};
125
+ }
package/src/lib/styles/themes/_index_themes.scss ADDED
@@ -0,0 +1,2 @@
1
+ @forward './dark.theme';
2
+ @forward './light.theme';
package/src/lib/styles/themes/_light.theme.scss ADDED
@@ -0,0 +1,125 @@
1
+ @use '../variables/colors.variables' as *;
2
+
3
+ .theme--light {
4
+ --yd-color-text-primary :#{$grey-600};
5
+ --yd-color-text-secondary :#{$grey-400};
6
+ --yd-color-text-tertiary :#{$grey-50};
7
+ --yd-color-text-quaternary :#{$grey-500};
8
+
9
+ --yd-color-surface-primary :#{$grey-50};
10
+ --yd-color-surface-secondary :#{$grey-0};
11
+ --yd-color-surface-tertiary :#{$grey-50};
12
+ --yd-color-surface-quaternary :#{$grey-200};
13
+ --yd-color-surface-quinary :#{$grey-600};
14
+
15
+ --yd-color-border-primary :#{$grey-400};
16
+ --yd-color-border-secondary :#{$grey-200};
17
+ --yd-color-border-tertiary :#{$grey-100};
18
+ --yd-color-border-quaternary :#{$grey-50};
19
+
20
+ --yd-color-text-brand-primary :#{$brand-300};
21
+ --yd-color-text-brand-secondary :#{$brand-200};
22
+
23
+ --yd-color-surface-brand-primary :#{$brand-300};
24
+ --yd-color-surface-brand-secondary :#{$brand-100};
25
+
26
+ --yd-color-border-brand-primary :#{$brand-300};
27
+ --yd-color-border-brand-secondary :#{$brand-200};
28
+
29
+ --yd-color-text-info-primary :#{$blue-400};
30
+ --yd-color-text-info-secondary :#{$blue-500};
31
+ --yd-color-text-info-tertiary :#{$blue-0};
32
+
33
+ --yd-color-surface-info-primary :#{$blue-0};
34
+ --yd-color-surface-info-secondary :#{$blue-100};
35
+ --yd-color-surface-info-tertiary :#{$blue-300};
36
+ --yd-color-surface-info-quaternary :#{$blue-400};
37
+ --yd-color-surface-info-quinary :#{$blue-200};
38
+
39
+ --yd-color-border-info-primary :#{$blue-300};
40
+ --yd-color-border-info-secondary :#{$blue-500};
41
+
42
+ --yd-color-text-danger-primary :#{$danger-300};
43
+ --yd-color-text-danger-secondary :#{$danger-500};
44
+
45
+ --yd-color-surface-danger-primary :#{$danger-200};
46
+ --yd-color-surface-danger-secondary :#{$danger-0};
47
+
48
+ --yd-color-border-danger-primary :#{$danger-100};
49
+ --yd-color-border-danger-secondary :#{$danger-300};
50
+ --yd-color-border-danger-tertiary :#{$danger-500};
51
+
52
+ --yd-color-text-warning-primary :#{$warning-500};
53
+
54
+ --yd-color-surface-warning-primary :#{$warning-300};
55
+ --yd-color-surface-warning-secondary :#{$warning-0};
56
+
57
+ --yd-color-border-warning-primary :#{$warning-400};
58
+ --yd-color-border-warning-secondary :#{$warning-300};
59
+ --yd-color-border-warning-tertiary :#{$warning-500};
60
+
61
+ --yd-color-text-success-primary :#{$success-300};
62
+
63
+ --yd-color-surface-success-primary :#{$success-300};
64
+ --yd-color-surface-success-secondary :#{$success-0};
65
+
66
+ --yd-color-border-success-primary :#{$success-300};
67
+ --yd-color-border-success-secondary :#{$success-100};
68
+ --yd-color-border-success-tertiary :#{$success-50};
69
+ --yd-color-border-success-quaternary :#{$success-0};
70
+ // <------- Chips -------->
71
+ --yd-chip-color-surface-primary :#{$grey-100};
72
+ --yd-chip-color-primary-text-default :#{$grey-700};
73
+ // <------- buttons -------->
74
+ // Primary
75
+ --yd-btn-color-primary-text-default :#{$grey-0};
76
+ --yd-btn-color-primary-text-hover :#{$grey-50};
77
+ --yd-btn-color-primary-text-active :#{$grey-0};
78
+ --yd-btn-color-primary-text-disabled :#{$grey-500};
79
+
80
+ --yd-btn-color-primary-surface-default :#{$brand-300};
81
+ --yd-btn-color-primary-surface-hover :#{$brand-200};
82
+ --yd-btn-color-primary-surface-active :#{$brand-400};
83
+ --yd-btn-color-primary-surface-disabled :#{$grey-200};
84
+
85
+ --yd-btn-color-primary-border-default :transparent;
86
+ --yd-btn-color-primary-border-hover :transparent;
87
+ --yd-btn-color-primary-border-active :transparent;
88
+ --yd-btn-color-primary-border-disabled :transparent;
89
+
90
+ --yd-btn-color-primary-outline-focus :#{$grey-100};
91
+ // Secondary
92
+ --yd-btn-color-secondary-text-default :#{$grey-600};
93
+ --yd-btn-color-secondary-text-hover :#{$grey-600};
94
+ --yd-btn-color-secondary-text-active :#{$grey-700};
95
+ --yd-btn-color-secondary-text-disabled :#{$grey-500};
96
+
97
+ --yd-btn-color-secondary-surface-default :transparent;
98
+ --yd-btn-color-secondary-surface-hover :#{$grey-100};
99
+ --yd-btn-color-secondary-surface-active :#{$grey-300};
100
+ --yd-btn-color-secondary-surface-disabled :transparent;
101
+
102
+ --yd-btn-color-secondary-border-default :#{$grey-200};
103
+ --yd-btn-color-secondary-border-hover :#{$grey-550};
104
+ --yd-btn-color-secondary-border-active :#{$grey-300};
105
+ --yd-btn-color-secondary-border-disabled :#{$grey-500};
106
+
107
+ --yd-btn-color-secondary-outline-focus :#{$blue-200};
108
+ // Tertiary
109
+ --yd-btn-color-tertiary-text-default :#{$grey-600};
110
+ --yd-btn-color-tertiary-text-hover :#{$grey-550};
111
+ --yd-btn-color-tertiary-text-active :#{$grey-700};
112
+ --yd-btn-color-tertiary-text-disabled :#{$grey-500};
113
+
114
+ --yd-btn-color-tertiary-surface-default :transparent;
115
+ --yd-btn-color-tertiary-surface-hover :#{$grey-100};
116
+ --yd-btn-color-tertiary-surface-active :#{$grey-200};
117
+ --yd-btn-color-tertiary-surface-disabled :transparent;
118
+
119
+ --yd-btn-color-tertiary-border-default :transparent;
120
+ --yd-btn-color-tertiary-border-hover :transparent;
121
+ --yd-btn-color-tertiary-border-active :transparent;
122
+ --yd-btn-color-tertiary-border-disabled :transparent;
123
+
124
+ --yd-btn-color-tertiary-outline-focus :#{$blue-200};
125
+ }
package/src/lib/styles/tokens/_font.tokens.scss ADDED
@@ -0,0 +1,15 @@
1
+ * {
2
+ --font-family-primary :"Roboto", sans-serif;
3
+
4
+ --font-size-h1 :4em;
5
+ --font-size-h2 :3.75em;
6
+ --font-size-h3 :3em;
7
+ --font-size-h4 :2.125em;
8
+ --font-size-h5 :1.5em;
9
+ --font-size-h6 :1.3125em;
10
+ --font-size-b1 :1em;
11
+ --font-size-b2 :.875em;
12
+ --font-size-c1 :.75em;
13
+ --font-size-c2 :.625em;
14
+ --font-size-c3 :.5em;
15
+ }
package/src/lib/styles/tokens/_index_tokens.scss ADDED
@@ -0,0 +1,2 @@
1
+ @forward './font.tokens';
2
+ @forward './sizes-spacing.tokens'
package/src/lib/styles/tokens/_sizes-spacing.tokens.scss ADDED
@@ -0,0 +1,24 @@
1
+ @use '../variables/sizes.variables' as *;
2
+
3
+ * {
4
+ --spacing-3xs :#{$baseunit-2};
5
+ --spacing-2xs :#{$baseunit-3};
6
+ --spacing-xs :#{$baseunit-4};
7
+ --spacing-sm :#{$baseunit-6};
8
+ --spacing-md :#{$baseunit-10};
9
+ --spacing-lg :#{$baseunit-13};
10
+ --spacing-xl :#{$baseunit-15};
11
+ --spacing-2xl :#{$baseunit-20};
12
+ --spacing-blocks :#{$baseunit-7};
13
+
14
+ --radius-0 :#{$baseunit-3};
15
+ --radius-minimal :#{$baseunit-4};
16
+ --radius-rounded :#{$baseunit-6};
17
+ --radius-full :#{$baseunit-22};
18
+
19
+ --border-xs :#{$auxunit-1};
20
+ --border-sm :#{$auxunit-2};
21
+ --border-md :#{$auxunit-3};
22
+ --border-lg :#{$auxunit-5};
23
+ --border-xl :#{$baseunit-3};
24
+ }
package/src/lib/styles/variables/_colors.variables.scss ADDED
@@ -0,0 +1,51 @@
1
+ $grey-0 :#F9F9F9;
2
+ $grey-50 :#eeeeee;
3
+ $grey-100 :#DDDDDD;
4
+ $grey-200 :#C6C6C6;
5
+ $grey-300 :#AFAFAF;
6
+ $grey-400 :#7F7F7F;
7
+ $grey-500 :#4F4F4F;
8
+ $grey-550 :#2b2b2b;
9
+ $grey-600 :#1b1d1f;
10
+ $grey-650 :#151718;
11
+ $grey-700 :#0B0C0C;
12
+
13
+ $brand-0 :#d9ed92;
14
+ $brand-50 :#99d98c;
15
+ $brand-100 :#76c893;
16
+ $brand-200 :#168aad;
17
+ $brand-300 :#1a759f;
18
+ $brand-400 :#1e6091;
19
+ $brand-500 :#184e77;
20
+
21
+ $danger-0 :#ffd4d1;
22
+ $danger-100 :#F97066;
23
+ $danger-200 :#F04438;
24
+ $danger-300 :#D92D20;
25
+ $danger-400 :#B42318;
26
+ $danger-500 :#941c14;
27
+ $danger-600 :#520b06;
28
+
29
+ $warning-0 :#FFF8E1;
30
+ $warning-100 :#FFE59E;
31
+ $warning-200 :#FFD666;
32
+ $warning-300 :#FFB020;
33
+ $warning-400 :#F79009;
34
+ $warning-500 :#DC6803;
35
+ $warning-600 :#ad5100;
36
+
37
+ $success-0 :#dafff3;
38
+ $success-50 :#beffe2;
39
+ $success-100 :#079455;
40
+ $success-200 :#067647;
41
+ $success-300 :#085D3A;
42
+ $success-400 :#074D31;
43
+ $success-500 :#053c26;
44
+
45
+ $blue-0 :#dbf6ff;
46
+ $blue-100 :#a9d6e5;
47
+ $blue-200 :#89c2d9;
48
+ $blue-300 :#61a5c2;
49
+ $blue-400 :#468faf;
50
+ $blue-500 :#1a4b5f;
51
+ $blue-600 :#0d2c38;
package/src/lib/styles/variables/_index_variables.scss ADDED
@@ -0,0 +1,2 @@
1
+ @forward './colors.variables';
2
+ @forward './sizes.variables';
package/src/lib/styles/variables/_sizes.variables.scss ADDED
@@ -0,0 +1,28 @@
1
+ $auxunit-1 :.0625rem;
2
+ $auxunit-2 :.0781rem;
3
+ $auxunit-3 :.0938rem;
4
+ $auxunit-4 :.1094rem;
5
+ $auxunit-5 :.125rem;
6
+
7
+ $baseunit-1 :0;
8
+ $baseunit-2 :.125rem;
9
+ $baseunit-3 :.25rem;
10
+ $baseunit-4 :.5rem;
11
+ $baseunit-5 :.75rem;
12
+ $baseunit-6 :1rem;
13
+ $baseunit-7 :1.25rem;
14
+ $baseunit-8 :1.5rem;
15
+ $baseunit-9 :1.75rem;
16
+ $baseunit-10 :2rem;
17
+ $baseunit-11 :2.5rem;
18
+ $baseunit-12 :2.75rem;
19
+ $baseunit-13 :3rem;
20
+ $baseunit-14 :3.5rem;
21
+ $baseunit-15 :4rem;
22
+ $baseunit-16 :4.5rem;
23
+ $baseunit-17 :5rem;
24
+ $baseunit-18 :5.5rem;
25
+ $baseunit-19 :6rem;
26
+ $baseunit-20 :6.5rem;
27
+ $baseunit-21 :7.5rem;
28
+ $baseunit-22 :10rem;