@dxtmisha/d1 0.1.0

package/dist/types.js

@@ -0,0 +1 @@
+import "@vue/runtime-core";

package/dist/wiki/wiki.d.ts

@@ -0,0 +1,2 @@
+import { StorybookArgsToList } from '@dxtmisha/wiki';
+export declare const wikiD1: StorybookArgsToList;

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@dxtmisha/d1",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "DXT-UI component library",
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "dxt-ui"
+  ],
+  "author": "dxtmisha@gmail.com",
+  "license": "MIT",
+  "homepage": "https://github.com/dxtmisha/dxt-ui/tree/main/packages/d1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dxtmisha/dxt-ui.git",
+    "directory": "packages/d1"
+  },
+  "bugs": {
+    "url": "https://github.com/dxtmisha/dxt-ui/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "dxt-ui": "dxt-ui image",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist/",
+    "src/styles",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ],
+  "exports": {
+    "./D1Image": {
+      "import": "./dist/D1Image.js",
+      "types": "./dist/components/Ui/Image/index.d.ts"
+    },
+    "./plugin": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/library/plugin.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./style/ui-properties.scss": "./src/styles/Ui/style.scss",
+    "./style/ui.scss": "./src/styles/Ui/main.scss",
+    "./types.d.ts": {
+      "types": "./dist/library/types.d.ts"
+    }
+  },
+  "buildOptions": {
+    "name": "@dxtmisha/constructor",
+    "formats": [
+      "esm-bundler"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "devDependencies": {
+    "@dxtmisha/configuration": "*",
+    "@dxtmisha/constructor": "*",
+    "@dxtmisha/functional": "*",
+    "@dxtmisha/functional-basic": "*",
+    "@dxtmisha/media": "*",
+    "@dxtmisha/styles": "*",
+    "vue": "*"
+  },
+  "dependencies": {},
+  "sideEffects": false
+}

package/src/styles/Ui/basic.scss

@@ -0,0 +1,3 @@
+@use "./vars";
+@use "./properties";
+@use "./classes";

package/src/styles/Ui/classes/d1-background.scss

@@ -0,0 +1,57 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-background {
+  &--primary {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-primary)});
+  }
+  
+  &--primaryVariant {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-primaryVariant)});
+  }
+  
+  &--warning {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-warning)});
+  }
+  
+  &--success {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-success)});
+  }
+  
+  &--error {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-error)});
+  }
+  
+  &--surface {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-surface)});
+  }
+  
+  &--inversePrimary {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-inversePrimary)});
+  }
+  
+  &--inversePrimaryVariant {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-inversePrimaryVariant)});
+  }
+  
+  &--inverseSurface {
+    @include ui.backgroundColor(#{var(--d1-sys-palette-inverseSurface)});
+  }
+  
+  &--palette {
+    &.d1-background--primary {
+      @include ui.paletteBackground(#{var(--d1-sys-palette-primary)});
+    }
+    
+    &.d1-background--primaryVariant {
+      @include ui.paletteBackground(#{var(--d1-sys-palette-primaryVariant)});
+    }
+    
+    &.d1-background--inversePrimary {
+      @include ui.paletteBackground(#{var(--d1-sys-palette-inversePrimary)});
+    }
+    
+    &.d1-background--inversePrimaryVariant {
+      @include ui.paletteBackground(#{var(--d1-sys-palette-inversePrimaryVariant)});
+    }
+  }
+}

package/src/styles/Ui/classes/d1-border.scss

@@ -0,0 +1,117 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-border {
+  &--primary {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-primary)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--primaryBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-primary)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--primaryMuted {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-primary)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-disabled)});
+  }
+  
+  &--primaryVariant {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-primaryVariant)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--primaryVariantBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-primaryVariant)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--primaryVariantMuted {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-primaryVariant)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-disabled)});
+  }
+  
+  &--warning {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-warning)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--warningBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-warning)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--success {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-success)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--successBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-success)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--error {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-error)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--errorBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-error)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--outline {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-outline)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-outline)});
+  }
+  
+  &--outlineBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-outline)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-outline)});
+  }
+  
+  &--outlineVariant {
+    border-width: var(--d1-ref-spacing-px);
+    @include ui.borderColor(#{var(--d1-sys-palette-outlineVariant)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-outline)});
+  }
+  
+  &--outlineVariantBold {
+    border-width: var(--d1-ref-spacing-2px);
+    @include ui.borderColor(#{var(--d1-sys-palette-outlineVariant)});
+    @include ui.borderOpacity(#{var(--d1-sys-opacity-outline)});
+  }
+  
+  &--palette {
+    &.d1-border--primary {
+      @include ui.paletteBorder(#{var(--d1-sys-palette-primary)});
+    }
+    
+    &.d1-border--primaryVariant {
+      @include ui.paletteBorder(#{var(--d1-sys-palette-primaryVariant)});
+    }
+    
+    &.d1-border--outline {
+      @include ui.paletteBorder(#{var(--d1-sys-palette-outline)});
+    }
+    
+    &.d1-border--outlineVariant {
+      @include ui.paletteBorder(#{var(--d1-sys-palette-outlineVariant)});
+    }
+  }
+}

package/src/styles/Ui/classes/d1-color.scss

@@ -0,0 +1,118 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-color {
+  &--primary {
+    @include ui.color(#{var(--d1-sys-palette-primary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-high)});
+  }
+  
+  &--primaryMedium {
+    @include ui.color(#{var(--d1-sys-palette-primary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--primaryVariant {
+    @include ui.color(#{var(--d1-sys-palette-primaryVariant)});
+  }
+  
+  &--warning {
+    @include ui.color(#{var(--d1-sys-palette-warning)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-high)});
+  }
+  
+  &--warningMedium {
+    @include ui.color(#{var(--d1-sys-palette-warning)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--success {
+    @include ui.color(#{var(--d1-sys-palette-success)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-high)});
+  }
+  
+  &--successMedium {
+    @include ui.color(#{var(--d1-sys-palette-success)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--error {
+    @include ui.color(#{var(--d1-sys-palette-error)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-high)});
+  }
+  
+  &--errorMedium {
+    @include ui.color(#{var(--d1-sys-palette-error)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--onPrimary {
+    @include ui.color(#{var(--d1-sys-palette-onPrimary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-primary-high)});
+  }
+  
+  &--onPrimaryMedium {
+    @include ui.color(#{var(--d1-sys-palette-onPrimary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-primary-medium)});
+  }
+  
+  &--onPrimaryDisabled {
+    @include ui.color(#{var(--d1-sys-palette-onPrimary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-primary-disabled)});
+  }
+  
+  &--onSurface {
+    @include ui.color(#{var(--d1-sys-palette-onSurface)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-high)});
+  }
+  
+  &--onSurfaceMedium {
+    @include ui.color(#{var(--d1-sys-palette-onSurface)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-medium)});
+  }
+  
+  &--onSurfaceDisabled {
+    @include ui.color(#{var(--d1-sys-palette-onSurface)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-disabled)});
+  }
+  
+  &--inverseOnPrimary {
+    @include ui.color(#{var(--d1-sys-palette-inverseOnPrimary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-primary-high)});
+  }
+  
+  &--inverseOnPrimaryMedium {
+    @include ui.color(#{var(--d1-sys-palette-inverseOnPrimary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-primary-medium)});
+  }
+  
+  &--inverseOnPrimaryDisabled {
+    @include ui.color(#{var(--d1-sys-palette-inverseOnPrimary)});
+    @include ui.colorOpacity(#{var(--d1-sys-opacity-primary-disabled)});
+  }
+  
+  &--palette {
+    &.d1-color--primary {
+      @include ui.paletteColor(#{var(--d1-sys-palette-primary)});
+    }
+    
+    &.d1-color--primaryMedium {
+      @include ui.paletteColor(#{var(--d1-sys-palette-primary)});
+    }
+    
+    &.d1-color--primaryVariant {
+      @include ui.paletteColor(#{var(--d1-sys-palette-primaryVariant)});
+    }
+    
+    &.d1-color--onSurface {
+      @include ui.paletteColor(#{var(--d1-sys-palette-onSurface)});
+    }
+    
+    &.d1-color--onSurfaceMedium {
+      @include ui.paletteColor(#{var(--d1-sys-palette-onSurface)});
+    }
+    
+    &.d1-color--onSurfaceDisabled {
+      @include ui.paletteColor(#{var(--d1-sys-palette-onSurface)});
+    }
+  }
+}